Support short uuid for GET video/playlist

25 files changed, 86 insertions, 54 deletions

diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
index 63143d0f9..08500ef5c 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
@@ -122,7 +122,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit {
   }
 
   getVideoUrl (videoBlock: VideoBlacklist) {
-    return Video.buildClientUrl(videoBlock.video.uuid)
+    return Video.buildWatchUrl(videoBlock.video)
   }
 
   toHtml (text: string) {
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts b/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
index bb9d70524..68254526a 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.ts
@@ -1,7 +1,7 @@
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { Notifier, RestPagination, RestTable } from '@app/core'
-import { VideoImportService } from '@app/shared/shared-main'
+import { Video, VideoImportService } from '@app/shared/shared-main'
 import { VideoImport, VideoImportState } from '@shared/models'
 
 @Component({
@@ -55,11 +55,11 @@ export class MyVideoImportsComponent extends RestTable implements OnInit {
   }
 
   getVideoUrl (video: { uuid: string }) {
-    return '/w/' + video.uuid
+    return Video.buildWatchUrl(video)
   }
 
   getEditVideoUrl (video: { uuid: string }) {
-    return '/videos/update/' + video.uuid
+    return Video.buildUpdateUrl(video)
   }
 
   protected reloadData () {
diff --git a/client/src/app/+remote-interaction/remote-interaction.component.ts b/client/src/app/+remote-interaction/remote-interaction.component.ts
index 6ddf5b58d..293f7edad 100644
--- a/client/src/app/+remote-interaction/remote-interaction.component.ts
+++ b/client/src/app/+remote-interaction/remote-interaction.component.ts
@@ -1,7 +1,7 @@
 import { forkJoin } from 'rxjs'
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { VideoChannel } from '@app/shared/shared-main'
+import { Video, VideoChannel } from '@app/shared/shared-main'
 import { SearchService } from '@app/shared/shared-search'
 
 @Component({
@@ -39,7 +39,7 @@ export class RemoteInteractionComponent implements OnInit {
       if (videoResult.data.length !== 0) {
         const video = videoResult.data[0]
 
-        redirectUrl = '/w/' + video.uuid
+        redirectUrl = Video.buildWatchUrl(video)
       } else if (channelResult.data.length !== 0) {
         const channel = new VideoChannel(channelResult.data[0])
 
diff --git a/client/src/app/+search/shared/abstract-lazy-load.resolver.ts b/client/src/app/+search/shared/abstract-lazy-load.resolver.ts
index 31240f451..b18a5b64d 100644
--- a/client/src/app/+search/shared/abstract-lazy-load.resolver.ts
+++ b/client/src/app/+search/shared/abstract-lazy-load.resolver.ts
@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs'
 import { map } from 'rxjs/operators'
 import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router'
-import { ResultList } from '@shared/models/result-list.model'
+import { ResultList } from '@shared/models'
 
 export abstract class AbstractLazyLoadResolver <T> implements Resolve<any> {
   protected router: Router
diff --git a/client/src/app/+search/shared/playlist-lazy-load.resolver.ts b/client/src/app/+search/shared/playlist-lazy-load.resolver.ts
index 14ae798df..3310e9627 100644
--- a/client/src/app/+search/shared/playlist-lazy-load.resolver.ts
+++ b/client/src/app/+search/shared/playlist-lazy-load.resolver.ts
@@ -19,6 +19,6 @@ export class PlaylistLazyLoadResolver extends AbstractLazyLoadResolver<VideoPlay
   }
 
   protected buildUrl (playlist: VideoPlaylist) {
-    return '/w/p/' + playlist.uuid
+    return VideoPlaylist.buildWatchUrl(playlist)
   }
 }
diff --git a/client/src/app/+search/shared/video-lazy-load.resolver.ts b/client/src/app/+search/shared/video-lazy-load.resolver.ts
index 12b5b2e82..69a3eb159 100644
--- a/client/src/app/+search/shared/video-lazy-load.resolver.ts
+++ b/client/src/app/+search/shared/video-lazy-load.resolver.ts
@@ -19,6 +19,6 @@ export class VideoLazyLoadResolver extends AbstractLazyLoadResolver<Video> {
   }
 
   protected buildUrl (video: Video) {
-    return '/w/' + video.uuid
+    return Video.buildWatchUrl(video)
   }
 }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
index 4c39b276a..01c9fcb16 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
@@ -1,11 +1,11 @@
 
 import { forkJoin } from 'rxjs'
-import { AfterViewChecked, AfterViewInit, Component, EventEmitter, OnInit, Output } from '@angular/core'
+import { AfterViewInit, Component, EventEmitter, OnInit, Output } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService } from '@app/core'
 import { scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
-import { VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
+import { Video, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { LiveVideo, LiveVideoCreate, LiveVideoUpdate, PeerTubeProblemDocument, ServerErrorCode, VideoPrivacy } from '@shared/models'
@@ -127,7 +127,7 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
       () => {
         this.notifier.success($localize`Live published.`)
 
-        this.router.navigate(['/w', video.uuid])
+        this.router.navigateByUrl(Video.buildWatchUrl(video))
       },
 
       err => {
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
index f383662a1..ec027f257 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
@@ -1,16 +1,16 @@
+import { UploadState, UploadxOptions, UploadxService } from 'ngx-uploadx'
+import { HttpErrorResponse, HttpEventType, HttpHeaders } from '@angular/common/http'
 import { AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
-import { UploadxOptions, UploadState, UploadxService } from 'ngx-uploadx'
-import { UploaderXFormData } from './uploaderx-form-data'
 import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService, UserService } from '@app/core'
-import { scrollToTop, genericUploadErrorHandler } from '@app/helpers'
+import { genericUploadErrorHandler, scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
-import { BytesPipe, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
+import { BytesPipe, Video, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 import { VideoPrivacy } from '@shared/models'
+import { UploaderXFormData } from './uploaderx-form-data'
 import { VideoSend } from './video-send'
-import { HttpErrorResponse, HttpEventType, HttpHeaders } from '@angular/common/http'
 
 @Component({
   selector: 'my-video-upload',
@@ -243,7 +243,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
             this.isUploadingVideo = false
 
             this.notifier.success($localize`Video published.`)
-            this.router.navigate([ '/w', video.uuid ])
+            this.router.navigateByUrl(Video.buildWatchUrl(video))
           },
 
           err => {
diff --git a/client/src/app/+videos/+video-edit/video-update.component.html b/client/src/app/+videos/+video-edit/video-update.component.html
index 9629081e3..33e3ddd14 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.html
+++ b/client/src/app/+videos/+video-edit/video-update.component.html
@@ -1,7 +1,7 @@
 <div class="margin-content">
   <div class="title-page title-page-single">
     <span class="mr-1" i18n>Update</span>
-    <a [routerLink]="[ '/w', video.uuid ]">{{ video?.name }}</a>
+    <a [routerLink]="getVideoUrl()">{{ video?.name }}</a>
   </div>
 
   <form novalidate [formGroup]="form">
diff --git a/client/src/app/+videos/+video-edit/video-update.component.ts b/client/src/app/+videos/+video-edit/video-update.component.ts
index 574669a23..1534eee82 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.ts
+++ b/client/src/app/+videos/+video-edit/video-update.component.ts
@@ -5,7 +5,7 @@ import { Component, HostListener, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { Notifier } from '@app/core'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
+import { Video, VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { LiveVideo, LiveVideoUpdate, VideoPrivacy } from '@shared/models'
@@ -156,7 +156,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
             this.isUpdatingVideo = false
             this.loadingBar.useRef().complete()
             this.notifier.success($localize`Video updated.`)
-            this.router.navigate([ '/w', this.video.uuid ])
+            this.router.navigateByUrl(Video.buildWatchUrl(this.video))
           },
 
           err => {
@@ -175,4 +175,8 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
       pluginData: this.video.pluginData
     })
   }
+
+  getVideoUrl () {
+    return Video.buildWatchUrl(this.videoDetails)
+  }
 }
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/comment/video-comment.component.html
index 06548edc8..d8b944b35 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.html
@@ -20,7 +20,7 @@
             </a>
           </div>
 
-          <a [routerLink]="['/w', video.uuid, { 'threadId': comment.threadId }]" class="comment-date" [title]="comment.createdAt">
+          <a [routerLink]="['/w', video.shortUUID, { 'threadId': comment.threadId }]" class="comment-date" [title]="comment.createdAt">
             {{ comment.createdAt | myFromNow }}
           </a>
         </div>
@@ -45,7 +45,7 @@
       <ng-container *ngIf="comment.isDeleted">
         <div class="comment-account-date">
           <span class="comment-account" i18n>Deleted</span>
-          <a [routerLink]="['/w', video.uuid, { 'threadId': comment.threadId }]"
+          <a [routerLink]="['/w', video.shortUUID, { 'threadId': comment.threadId }]"
              class="comment-date">{{ comment.createdAt | myFromNow }}</a>
         </div>
 
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.ts b/client/src/app/+videos/+video-watch/comment/video-comments.component.ts
index 210236b61..2c39e63fb 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comments.component.ts
+++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.ts
@@ -247,7 +247,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
       this.componentPagination.totalItems = null
       this.totalNotDeletedComments = null
 
-      this.syndicationItems = this.videoCommentService.getVideoCommentsFeeds(this.video.uuid)
+      this.syndicationItems = this.videoCommentService.getVideoCommentsFeeds(this.video)
       this.loadMoreThreads()
     }
   }
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index a444dc51f..12b0baebe 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -312,7 +312,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   getVideoUrl () {
     if (!this.video.url) {
-      return this.video.originInstanceUrl + VideoDetails.buildClientUrl(this.video.uuid)
+      return this.video.originInstanceUrl + VideoDetails.buildWatchUrl(this.video)
     }
     return this.video.url
   }
@@ -415,7 +415,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   private loadVideo (videoId: string) {
     // Video did not change
-    if (this.video && this.video.uuid === videoId) return
+    if (
+      this.video &&
+      (this.video.uuid === videoId || this.video.shortUUID === videoId)
+    ) return
 
     if (this.player) this.player.pause()
 
@@ -489,7 +492,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   private loadPlaylist (playlistId: string) {
     // Playlist did not change
-    if (this.playlist && this.playlist.uuid === playlistId) return
+    if (
+      this.playlist &&
+      (this.playlist.uuid === playlistId || this.playlist.shortUUID === playlistId)
+    ) return
 
     this.playlistService.getVideoPlaylist(playlistId)
       .pipe(
@@ -772,13 +778,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   private flushPlayer () {
     // Remove player if it exists
-    if (this.player) {
-      try {
-        this.player.dispose()
-        this.player = undefined
-      } catch (err) {
-        console.error('Cannot dispose player.', err)
-      }
+    if (!this.player) return
+
+    try {
+      this.player.dispose()
+      this.player = undefined
+    } catch (err) {
+      console.error('Cannot dispose player.', err)
     }
   }
 
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
index 07b9dddba..67aa0e399 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
@@ -116,11 +116,11 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
   }
 
   getVideoUrl (abuse: AdminAbuse) {
-    return Video.buildClientUrl(abuse.video.uuid)
+    return Video.buildWatchUrl(abuse.video)
   }
 
   getCommentUrl (abuse: AdminAbuse) {
-    return Video.buildClientUrl(abuse.comment.video.uuid) + ';threadId=' + abuse.comment.threadId
+    return Video.buildWatchUrl(abuse.comment.video) + ';threadId=' + abuse.comment.threadId
   }
 
   getAccountUrl (abuse: ProcessedAbuse) {
diff --git a/client/src/app/shared/shared-main/angular/link.component.ts b/client/src/app/shared/shared-main/angular/link.component.ts
index 76d1201b9..597a16871 100644
--- a/client/src/app/shared/shared-main/angular/link.component.ts
+++ b/client/src/app/shared/shared-main/angular/link.component.ts
@@ -6,7 +6,7 @@ import { Component, Input, ViewEncapsulation } from '@angular/core'
   templateUrl: './link.component.html'
 })
 export class LinkComponent {
-  @Input() internalLink?: any[]
+  @Input() internalLink?: string | any[]
 
   @Input() href?: string
   @Input() target?: string
diff --git a/client/src/app/shared/shared-main/users/user-notification.model.ts b/client/src/app/shared/shared-main/users/user-notification.model.ts
index c80bc13b0..4c15eb981 100644
--- a/client/src/app/shared/shared-main/users/user-notification.model.ts
+++ b/client/src/app/shared/shared-main/users/user-notification.model.ts
@@ -12,6 +12,7 @@ import {
   UserRight,
   VideoInfo
 } from '@shared/models'
+import { Video } from '../video'
 
 export class UserNotification implements UserNotificationServer {
   id: number
@@ -238,7 +239,7 @@ export class UserNotification implements UserNotificationServer {
   }
 
   private buildVideoUrl (video: { uuid: string }) {
-    return '/w/' + video.uuid
+    return Video.buildWatchUrl(video)
   }
 
   private buildAccountUrl (account: { name: string, host: string }) {
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
index ab8ed9051..f0a4a3f37 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -26,12 +26,18 @@ export class Video implements VideoServerModel {
   licence: VideoConstant<number>
   language: VideoConstant<string>
   privacy: VideoConstant<VideoPrivacy>
+
   description: string
+
   duration: number
   durationLabel: string
+
   id: number
   uuid: string
+  shortUUID: string
+
   isLocal: boolean
+
   name: string
   serverHost: string
   thumbnailPath: string
@@ -85,8 +91,12 @@ export class Video implements VideoServerModel {
 
   pluginData?: any
 
-  static buildClientUrl (videoUUID: string) {
-    return '/w/' + videoUUID
+  static buildWatchUrl (video: Partial<Pick<Video, 'uuid' | 'shortUUID'>>) {
+    return '/w/' + (video.shortUUID || video.uuid)
+  }
+
+  static buildUpdateUrl (video: Pick<Video, 'uuid'>) {
+    return '/videos/update/' + video.uuid
   }
 
   constructor (hash: VideoServerModel, translations = {}) {
@@ -109,6 +119,7 @@ export class Video implements VideoServerModel {
 
     this.id = hash.id
     this.uuid = hash.uuid
+    this.shortUUID = hash.shortUUID
 
     this.isLocal = hash.isLocal
     this.name = hash.name
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts
index 2a73e6166..a41ff248b 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.ts
+++ b/client/src/app/shared/shared-share-modal/video-share.component.ts
@@ -1,5 +1,5 @@
 import { Component, ElementRef, Input, ViewChild } from '@angular/core'
-import { VideoDetails } from '@app/shared/shared-main'
+import { Video, VideoDetails } from '@app/shared/shared-main'
 import { VideoPlaylist } from '@app/shared/shared-video-playlist'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { VideoCaption } from '@shared/models'
@@ -98,14 +98,15 @@ export class VideoShareComponent {
 
   getVideoUrl () {
     let baseUrl = this.customizations.originUrl ? this.video.originInstanceUrl : window.location.origin
-    baseUrl += '/w/' + this.video.uuid
+    baseUrl += Video.buildWatchUrl(this.video)
+
     const options = this.getVideoOptions(baseUrl)
 
     return buildVideoLink(options)
   }
 
   getPlaylistUrl () {
-    const base = window.location.origin + '/w/p/' + this.playlist.uuid
+    const base = window.location.origin + VideoPlaylist.buildWatchUrl(this.playlist)
 
     if (!this.includeVideoInPlaylist) return base
 
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
index d5583c29f..ad5d30db2 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
@@ -12,7 +12,7 @@ export class VideoThumbnailComponent {
   @Input() video: Video
   @Input() nsfw = false
 
-  @Input() videoRouterLink: any[]
+  @Input() videoRouterLink: string | any[]
   @Input() queryParams: { [ p: string ]: any }
   @Input() videoHref: string
   @Input() videoTarget: string
@@ -57,7 +57,7 @@ export class VideoThumbnailComponent {
   getVideoRouterLink () {
     if (this.videoRouterLink) return this.videoRouterLink
 
-    return [ '/w', this.video.uuid ]
+    return Video.buildWatchUrl(this.video)
   }
 
   onWatchLaterClick (event: Event) {
diff --git a/client/src/app/shared/shared-video-comment/video-comment.model.ts b/client/src/app/shared/shared-video-comment/video-comment.model.ts
index 94d6c5fa8..ba0f57e8f 100644
--- a/client/src/app/shared/shared-video-comment/video-comment.model.ts
+++ b/client/src/app/shared/shared-video-comment/video-comment.model.ts
@@ -1,5 +1,5 @@
 import { getAbsoluteAPIUrl } from '@app/helpers'
-import { Account, Actor } from '@app/shared/shared-main'
+import { Account, Actor, Video } from '@app/shared/shared-main'
 import { Account as AccountInterface, VideoComment as VideoCommentServerModel, VideoCommentAdmin as VideoCommentAdminServerModel } from '@shared/models'
 
 export class VideoComment implements VideoCommentServerModel {
@@ -85,7 +85,7 @@ export class VideoCommentAdmin implements VideoCommentAdminServerModel {
       id: hash.video.id,
       uuid: hash.video.uuid,
       name: hash.video.name,
-      localUrl: '/w/' + hash.video.uuid
+      localUrl: Video.buildWatchUrl(hash.video)
     }
 
     this.localUrl = this.video.localUrl + ';threadId=' + this.threadId
diff --git a/client/src/app/shared/shared-video-comment/video-comment.service.ts b/client/src/app/shared/shared-video-comment/video-comment.service.ts
index c5aeb3c12..4f1452116 100644
--- a/client/src/app/shared/shared-video-comment/video-comment.service.ts
+++ b/client/src/app/shared/shared-video-comment/video-comment.service.ts
@@ -9,6 +9,7 @@ import {
   FeedFormat,
   ResultList,
   ThreadsResultList,
+  Video,
   VideoComment as VideoCommentServerModel,
   VideoCommentAdmin,
   VideoCommentCreate,
@@ -127,7 +128,7 @@ export class VideoCommentService {
       )
   }
 
-  getVideoCommentsFeeds (videoUUID?: string) {
+  getVideoCommentsFeeds (video: Pick<Video, 'uuid'>) {
     const feeds = [
       {
         format: FeedFormat.RSS,
@@ -146,9 +147,9 @@ export class VideoCommentService {
       }
     ]
 
-    if (videoUUID !== undefined) {
+    if (video !== undefined) {
       for (const feed of feeds) {
-        feed.url += '?videoId=' + videoUUID
+        feed.url += '?videoId=' + video.uuid
       }
     }
 
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index fe161c977..67e0de6a2 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -85,7 +85,7 @@ export class VideoMiniatureComponent implements OnInit {
     playlistElementId?: number
   }
 
-  videoRouterLink: any[] = []
+  videoRouterLink: string | any[] = []
   videoHref: string
   videoTarget: string
 
@@ -120,7 +120,7 @@ export class VideoMiniatureComponent implements OnInit {
 
   buildVideoLink () {
     if (this.videoLinkType === 'internal' || !this.video.url) {
-      this.videoRouterLink = [ '/w', this.video.uuid ]
+      this.videoRouterLink = Video.buildWatchUrl(this.video)
       return
     }
 
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
index 57eab4dfd..d99170e4e 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
@@ -66,7 +66,7 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
   buildRouterLink () {
     if (!this.playlist) return null
 
-    return [ '/w/p', this.playlist.uuid ]
+    return VideoPlaylist.buildWatchUrl(this.playlist)
   }
 
   buildRouterQuery () {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
index 8de5092a9..c80ea2e6b 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
@@ -39,7 +39,7 @@ export class VideoPlaylistMiniatureComponent implements OnInit {
     }
 
     if (this.linkType === 'internal' || !this.playlist.url) {
-      this.routerLink = [ '/w/p', this.playlist.uuid ]
+      this.routerLink = VideoPlaylist.buildWatchUrl(this.playlist)
       return
     }
 
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist.model.ts b/client/src/app/shared/shared-video-playlist/video-playlist.model.ts
index d67f372f4..d96b70922 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist.model.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist.model.ts
@@ -13,6 +13,8 @@ import {
 export class VideoPlaylist implements ServerVideoPlaylist {
   id: number
   uuid: string
+  shortUUID: string
+
   isLocal: boolean
 
   url: string
@@ -41,11 +43,17 @@ export class VideoPlaylist implements ServerVideoPlaylist {
 
   videoChannelBy?: string
 
+  static buildWatchUrl (playlist: Pick<VideoPlaylist, 'uuid' | 'shortUUID'>) {
+    return '/w/p/' + (playlist.uuid || playlist.shortUUID)
+  }
+
   constructor (hash: ServerVideoPlaylist, translations: {}) {
     const absoluteAPIUrl = getAbsoluteAPIUrl()
 
     this.id = hash.id
     this.uuid = hash.uuid
+    this.shortUUID = hash.shortUUID
+
     this.url = hash.url
     this.isLocal = hash.isLocal