client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts

   1 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
   2 import { AuthService, Notifier, ServerService } from '@app/core'
   3 import { Video, VideoService } from '@app/shared/shared-main'
   4 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
   5 import { secondsToTime } from '@shared/core-utils'
   6 import { HTMLServerConfig, VideoPlaylistElementType, VideoPlaylistElementUpdate, VideoPrivacy } from '@shared/models'
   7 import { VideoPlaylistElement } from './video-playlist-element.model'
   8 import { VideoPlaylist } from './video-playlist.model'
   9 import { VideoPlaylistService } from './video-playlist.service'
  10
  11 @Component({
  12   selector: 'my-video-playlist-element-miniature',
  13   styleUrls: [ './video-playlist-element-miniature.component.scss' ],
  14   templateUrl: './video-playlist-element-miniature.component.html',
  15   changeDetection: ChangeDetectionStrategy.OnPush
  16 })
  17 export class VideoPlaylistElementMiniatureComponent implements OnInit {
  18   @ViewChild('moreDropdown') moreDropdown: NgbDropdown
  19
  20   @Input() playlist: VideoPlaylist
  21   @Input() playlistElement: VideoPlaylistElement
  22   @Input() owned = false
  23   @Input() playing = false
  24   @Input() rowLink = false
  25   @Input() accountLink = true
  26   @Input() position: number // Keep this property because we're in the OnPush change detection strategy
  27   @Input() touchScreenEditButton = false
  28
  29   @Output() elementRemoved = new EventEmitter<VideoPlaylistElement>()
  30
  31   displayTimestampOptions = false
  32
  33   timestampOptions: {
  34     startTimestampEnabled: boolean
  35     startTimestamp: number
  36     stopTimestampEnabled: boolean
  37     stopTimestamp: number
  38   } = {} as any
  39
  40   private serverConfig: HTMLServerConfig
  41
  42   constructor (
  43     private authService: AuthService,
  44     private serverService: ServerService,
  45     private notifier: Notifier,
  46     private videoPlaylistService: VideoPlaylistService,
  47     private videoService: VideoService,
  48     private cdr: ChangeDetectorRef
  49   ) {}
  50
  51   ngOnInit (): void {
  52     this.serverConfig = this.serverService.getHTMLConfig()
  53   }
  54
  55   getVideoOwnerDisplayType (element: VideoPlaylistElement) {
  56     return this.videoService.buildDefaultOwnerDisplayType(element.video)
  57   }
  58
  59   isVideoPrivate () {
  60     return this.playlistElement.video.privacy.id === VideoPrivacy.PRIVATE
  61   }
  62
  63   isUnavailable (e: VideoPlaylistElement) {
  64     return e.type === VideoPlaylistElementType.UNAVAILABLE
  65   }
  66
  67   isPrivate (e: VideoPlaylistElement) {
  68     return e.type === VideoPlaylistElementType.PRIVATE
  69   }
  70
  71   isDeleted (e: VideoPlaylistElement) {
  72     return e.type === VideoPlaylistElementType.DELETED
  73   }
  74
  75   buildRouterLink () {
  76     if (!this.playlist) return null
  77
  78     return VideoPlaylist.buildWatchUrl(this.playlist)
  79   }
  80
  81   buildRouterQuery () {
  82     if (!this.playlistElement?.video) return {}
  83
  84     return {
  85       playlistPosition: this.playlistElement.position,
  86       start: this.playlistElement.startTimestamp,
  87       stop: this.playlistElement.stopTimestamp,
  88       resume: true
  89     }
  90   }
  91
  92   isVideoBlur (video: Video) {
  93     return video.isVideoNSFWForUser(this.authService.getUser(), this.serverConfig)
  94   }
  95
  96   removeFromPlaylist (playlistElement: VideoPlaylistElement) {
  97     const videoId = this.playlistElement.video ? this.playlistElement.video.id : undefined
  98
  99     this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, playlistElement.id, videoId)
 100         .subscribe({
 101           next: () => {
 102             this.notifier.success($localize`Video removed from ${this.playlist.displayName}`)
 103             this.elementRemoved.emit(playlistElement)
 104           },
 105
 106           error: err => this.notifier.error(err.message)
 107         })
 108
 109     this.moreDropdown.close()
 110   }
 111
 112   updateTimestamps (playlistElement: VideoPlaylistElement) {
 113     const body: VideoPlaylistElementUpdate = {}
 114
 115     body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null
 116     body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null
 117
 118     this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, playlistElement.id, body, this.playlistElement.video.id)
 119         .subscribe({
 120           next: () => {
 121             this.notifier.success($localize`Timestamps updated`)
 122
 123             playlistElement.startTimestamp = body.startTimestamp
 124             playlistElement.stopTimestamp = body.stopTimestamp
 125
 126             this.cdr.detectChanges()
 127           },
 128
 129           error: err => this.notifier.error(err.message)
 130         })
 131
 132     this.moreDropdown.close()
 133   }
 134
 135   formatTimestamp (playlistElement: VideoPlaylistElement) {
 136     const start = playlistElement.startTimestamp
 137     const stop = playlistElement.stopTimestamp
 138
 139     const startFormatted = secondsToTime(start, true, ':')
 140     const stopFormatted = secondsToTime(stop, true, ':')
 141
 142     if (start === null && stop === null) return ''
 143
 144     if (start !== null && stop === null) return $localize`Starts at ` + startFormatted
 145     if (start === null && stop !== null) return $localize`Stops at ` + stopFormatted
 146
 147     return $localize`Starts at ` + startFormatted + $localize` and stops at ` + stopFormatted
 148   }
 149
 150   onDropdownOpenChange () {
 151     this.displayTimestampOptions = false
 152   }
 153
 154   toggleDisplayTimestampsOptions (event: Event, playlistElement: VideoPlaylistElement) {
 155     event.preventDefault()
 156
 157     this.displayTimestampOptions = !this.displayTimestampOptions
 158
 159     if (this.displayTimestampOptions === true) {
 160       this.timestampOptions = {
 161         startTimestampEnabled: false,
 162         stopTimestampEnabled: false,
 163         startTimestamp: 0,
 164         stopTimestamp: playlistElement.video.duration
 165       }
 166
 167       if (playlistElement.startTimestamp) {
 168         this.timestampOptions.startTimestampEnabled = true
 169         this.timestampOptions.startTimestamp = playlistElement.startTimestamp
 170       }
 171
 172       if (playlistElement.stopTimestamp) {
 173         this.timestampOptions.stopTimestampEnabled = true
 174         this.timestampOptions.stopTimestamp = playlistElement.stopTimestamp
 175       }
 176     }
 177
 178     this.cdr.markForCheck()
 179   }
 180 }