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 } 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 cdr: ChangeDetectorRef
  48   ) {}
  49
  50   ngOnInit (): void {
  51     this.serverConfig = this.serverService.getHTMLConfig()
  52   }
  53
  54   isVideoPrivate () {
  55     return this.playlistElement.video.privacy.id === VideoPrivacy.PRIVATE
  56   }
  57
  58   isUnavailable (e: VideoPlaylistElement) {
  59     return e.type === VideoPlaylistElementType.UNAVAILABLE
  60   }
  61
  62   isPrivate (e: VideoPlaylistElement) {
  63     return e.type === VideoPlaylistElementType.PRIVATE
  64   }
  65
  66   isDeleted (e: VideoPlaylistElement) {
  67     return e.type === VideoPlaylistElementType.DELETED
  68   }
  69
  70   buildRouterLink () {
  71     if (!this.playlist) return null
  72
  73     return VideoPlaylist.buildWatchUrl(this.playlist)
  74   }
  75
  76   buildRouterQuery () {
  77     if (!this.playlistElement?.video) return {}
  78
  79     return {
  80       playlistPosition: this.playlistElement.position,
  81       start: this.playlistElement.startTimestamp,
  82       stop: this.playlistElement.stopTimestamp,
  83       resume: true
  84     }
  85   }
  86
  87   isVideoBlur (video: Video) {
  88     return video.isVideoNSFWForUser(this.authService.getUser(), this.serverConfig)
  89   }
  90
  91   removeFromPlaylist (playlistElement: VideoPlaylistElement) {
  92     const videoId = this.playlistElement.video ? this.playlistElement.video.id : undefined
  93
  94     this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, playlistElement.id, videoId)
  95         .subscribe({
  96           next: () => {
  97             this.notifier.success($localize`Video removed from ${this.playlist.displayName}`)
  98             this.elementRemoved.emit(playlistElement)
  99           },
 100
 101           error: err => this.notifier.error(err.message)
 102         })
 103
 104     this.moreDropdown.close()
 105   }
 106
 107   updateTimestamps (playlistElement: VideoPlaylistElement) {
 108     const body: VideoPlaylistElementUpdate = {}
 109
 110     body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null
 111     body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null
 112
 113     this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, playlistElement.id, body, this.playlistElement.video.id)
 114         .subscribe({
 115           next: () => {
 116             this.notifier.success($localize`Timestamps updated`)
 117
 118             playlistElement.startTimestamp = body.startTimestamp
 119             playlistElement.stopTimestamp = body.stopTimestamp
 120
 121             this.cdr.detectChanges()
 122           },
 123
 124           error: err => this.notifier.error(err.message)
 125         })
 126
 127     this.moreDropdown.close()
 128   }
 129
 130   formatTimestamp (playlistElement: VideoPlaylistElement) {
 131     const start = playlistElement.startTimestamp
 132     const stop = playlistElement.stopTimestamp
 133
 134     const startFormatted = secondsToTime(start, true, ':')
 135     const stopFormatted = secondsToTime(stop, true, ':')
 136
 137     if (start === null && stop === null) return ''
 138
 139     if (start !== null && stop === null) return $localize`Starts at ` + startFormatted
 140     if (start === null && stop !== null) return $localize`Stops at ` + stopFormatted
 141
 142     return $localize`Starts at ` + startFormatted + $localize` and stops at ` + stopFormatted
 143   }
 144
 145   onDropdownOpenChange () {
 146     this.displayTimestampOptions = false
 147   }
 148
 149   toggleDisplayTimestampsOptions (event: Event, playlistElement: VideoPlaylistElement) {
 150     event.preventDefault()
 151
 152     this.displayTimestampOptions = !this.displayTimestampOptions
 153
 154     if (this.displayTimestampOptions === true) {
 155       this.timestampOptions = {
 156         startTimestampEnabled: false,
 157         stopTimestampEnabled: false,
 158         startTimestamp: 0,
 159         stopTimestamp: playlistElement.video.duration
 160       }
 161
 162       if (playlistElement.startTimestamp) {
 163         this.timestampOptions.startTimestampEnabled = true
 164         this.timestampOptions.startTimestamp = playlistElement.startTimestamp
 165       }
 166
 167       if (playlistElement.stopTimestamp) {
 168         this.timestampOptions.stopTimestampEnabled = true
 169         this.timestampOptions.stopTimestamp = playlistElement.stopTimestamp
 170       }
 171     }
 172
 173     this.cdr.markForCheck()
 174   }
 175 }