Add live info in watch page

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-video-miniature / video-miniature.component.ts

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 e1adbb6adbb9ae14cb4859262ff90d44c19eec27..cc5665ab1483cb0a0f8cd3324ad369124e64e056 100644 (file)
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -11,8 +11,7 @@ import {
   Output
 } from '@angular/core'
 import { AuthService, ScreenService, ServerService, User } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '../../../../../shared'
+import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models'
 import { Video } from '../shared-main'
 import { VideoPlaylistService } from '../shared-video-playlist'
 import { VideoActionsDisplayType } from './video-actions-dropdown.component'
@@ -29,6 +28,7 @@ export type MiniatureDisplayOptions = {
   blacklistInfo?: boolean
   nsfw?: boolean
 }
+export type VideoLinkType = 'internal' | 'lazy-load' | 'external'
 
 @Component({
   selector: 'my-video-miniature',
@@ -55,7 +55,7 @@ export class VideoMiniatureComponent implements OnInit {
   @Input() displayVideoActions = true
   @Input() fitWidth = false
 
-  @Input() useLazyLoadUrl = false
+  @Input() videoLinkType: VideoLinkType = 'internal'
 
   @Output() videoBlocked = new EventEmitter()
   @Output() videoUnblocked = new EventEmitter()
@@ -85,14 +85,15 @@ export class VideoMiniatureComponent implements OnInit {
     playlistElementId?: number
   }
 
-  videoLink: any[] = []
+  videoRouterLink: any[] = []
+  videoHref: string
+  videoTarget: string
 
   private ownerDisplayTypeChosen: 'account' | 'videoChannel'
 
   constructor (
     private screenService: ScreenService,
     private serverService: ServerService,
-    private i18n: I18n,
     private authService: AuthService,
     private videoPlaylistService: VideoPlaylistService,
     private cd: ChangeDetectorRef,
@@ -113,10 +114,7 @@ export class VideoMiniatureComponent implements OnInit {
 
     this.setUpBy()
 
-    this.channelLinkTitle = this.i18n(
-      '{{name}} (channel page)',
-      { name: this.video.channel.name, handle: this.video.byVideoChannel }
-    )
+    this.channelLinkTitle = $localize`${this.video.channel.name} (channel page)`
 
     // We rely on mouseenter to lazy load actions
     if (this.screenService.isInTouchScreen()) {
@@ -125,18 +123,20 @@ export class VideoMiniatureComponent implements OnInit {
   }
 
   buildVideoLink () {
-    if (this.useLazyLoadUrl && this.video.url) {
-      const remoteUriConfig = this.serverConfig.search.remoteUri
-
-      // Redirect on the external instance if not allowed to fetch remote data
-      const externalRedirect = (!this.authService.isLoggedIn() && !remoteUriConfig.anonymous) || !remoteUriConfig.users
-      const fromPath = window.location.pathname + window.location.search
+    if (this.videoLinkType === 'internal' || !this.video.url) {
+      this.videoRouterLink = [ '/videos/watch', this.video.uuid ]
+      return
+    }
 
-      this.videoLink = [ '/search/lazy-load-video', { url: this.video.url, externalRedirect, fromPath } ]
+    if (this.videoLinkType === 'external') {
+      this.videoRouterLink = null
+      this.videoHref = this.video.url
+      this.videoTarget = '_blank'
       return
     }
 
-    this.videoLink = [ '/videos/watch', this.video.uuid ]
+    // Lazy load
+    this.videoRouterLink = [ '/search/lazy-load-video', { url: this.video.url } ]
   }
 
   displayOwnerAccount () {
@@ -159,24 +159,24 @@ export class VideoMiniatureComponent implements OnInit {
     if (!video.state) return ''
 
     if (video.privacy.id !== VideoPrivacy.PRIVATE && video.state.id === VideoState.PUBLISHED) {
-      return this.i18n('Published')
+      return $localize`Published`
     }
 
     if (video.scheduledUpdate) {
       const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId)
-      return this.i18n('Publication scheduled on ') + updateAt
+      return $localize`Publication scheduled on ` + updateAt
     }
 
     if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) {
-      return this.i18n('Waiting transcoding')
+      return $localize`Waiting transcoding`
     }
 
     if (video.state.id === VideoState.TO_TRANSCODE) {
-      return this.i18n('To transcode')
+      return $localize`To transcode`
     }
 
     if (video.state.id === VideoState.TO_IMPORT) {
-      return this.i18n('To import')
+      return $localize`To import`
     }
 
     return ''