client/src/app/shared/shared-video-miniature/video-download.component.ts

   1 import { mapValues, pick } from 'lodash-es'
   2 import { tap } from 'rxjs/operators'
   3 import { Component, ElementRef, Inject, LOCALE_ID, ViewChild } from '@angular/core'
   4 import { AuthService, HooksService, Notifier } from '@app/core'
   5 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
   6 import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models'
   7 import { BytesPipe, NumberFormatterPipe, VideoDetails, VideoService } from '../shared-main'
   8
   9 type DownloadType = 'video' | 'subtitles'
  10 type FileMetadata = { [key: string]: { label: string, value: string }}
  11
  12 @Component({
  13   selector: 'my-video-download',
  14   templateUrl: './video-download.component.html',
  15   styleUrls: [ './video-download.component.scss' ]
  16 })
  17 export class VideoDownloadComponent {
  18   @ViewChild('modal', { static: true }) modal: ElementRef
  19
  20   downloadType: 'direct' | 'torrent' = 'direct'
  21
  22   resolutionId: number | string = -1
  23   subtitleLanguageId: string
  24
  25   videoFileMetadataFormat: FileMetadata
  26   videoFileMetadataVideoStream: FileMetadata | undefined
  27   videoFileMetadataAudioStream: FileMetadata | undefined
  28
  29   isAdvancedCustomizationCollapsed = true
  30
  31   type: DownloadType = 'video'
  32
  33   private activeModal: NgbModalRef
  34
  35   private bytesPipe: BytesPipe
  36   private numbersPipe: NumberFormatterPipe
  37
  38   private video: VideoDetails
  39   private videoCaptions: VideoCaption[]
  40
  41   constructor (
  42     @Inject(LOCALE_ID) private localeId: string,
  43     private notifier: Notifier,
  44     private modalService: NgbModal,
  45     private videoService: VideoService,
  46     private auth: AuthService,
  47     private hooks: HooksService
  48   ) {
  49     this.bytesPipe = new BytesPipe()
  50     this.numbersPipe = new NumberFormatterPipe(this.localeId)
  51   }
  52
  53   get typeText () {
  54     return this.type === 'video'
  55       ? $localize`video`
  56       : $localize`subtitles`
  57   }
  58
  59   getVideoFiles () {
  60     if (!this.video) return []
  61
  62     return this.video.getFiles()
  63   }
  64
  65   getCaptions () {
  66     if (!this.videoCaptions) return []
  67
  68     return this.videoCaptions
  69   }
  70
  71   show (video: VideoDetails, videoCaptions?: VideoCaption[]) {
  72     this.video = video
  73     this.videoCaptions = videoCaptions
  74
  75     this.activeModal = this.modalService.open(this.modal, { centered: true })
  76
  77     if (this.hasFiles()) {
  78       this.onResolutionIdChange(this.getVideoFiles()[0].resolution.id)
  79     }
  80
  81     if (this.hasCaptions()) {
  82       this.subtitleLanguageId = this.videoCaptions[0].language.id
  83     }
  84
  85     this.activeModal.shown.subscribe(() => {
  86       this.hooks.runAction('action:modal.video-download.shown', 'common')
  87     })
  88   }
  89
  90   onClose () {
  91     this.video = undefined
  92     this.videoCaptions = undefined
  93   }
  94
  95   download () {
  96     window.location.assign(this.getLink())
  97
  98     this.activeModal.close()
  99   }
 100
 101   getLink () {
 102     return this.type === 'subtitles' && this.videoCaptions
 103       ? this.getCaptionLink()
 104       : this.getVideoFileLink()
 105   }
 106
 107   async onResolutionIdChange (resolutionId: number) {
 108     this.resolutionId = resolutionId
 109
 110     const videoFile = this.getVideoFile()
 111
 112     if (!videoFile.metadata) {
 113       if (!videoFile.metadataUrl) return
 114
 115       await this.hydrateMetadataFromMetadataUrl(videoFile)
 116     }
 117
 118     if (!videoFile.metadata) return
 119
 120     this.videoFileMetadataFormat = videoFile
 121       ? this.getMetadataFormat(videoFile.metadata.format)
 122       : undefined
 123     this.videoFileMetadataVideoStream = videoFile
 124       ? this.getMetadataStream(videoFile.metadata.streams, 'video')
 125       : undefined
 126     this.videoFileMetadataAudioStream = videoFile
 127       ? this.getMetadataStream(videoFile.metadata.streams, 'audio')
 128       : undefined
 129   }
 130
 131   onSubtitleIdChange (subtitleId: string) {
 132     this.subtitleLanguageId = subtitleId
 133   }
 134
 135   hasFiles () {
 136     return this.getVideoFiles().length !== 0
 137   }
 138
 139   getVideoFile () {
 140     const file = this.getVideoFiles()
 141                      .find(f => f.resolution.id === this.resolutionId)
 142
 143     if (!file) {
 144       console.error('Could not find file with resolution %d.', this.resolutionId)
 145       return undefined
 146     }
 147
 148     return file
 149   }
 150
 151   getVideoFileLink () {
 152     const file = this.getVideoFile()
 153     if (!file) return ''
 154
 155     const suffix = this.isConfidentialVideo()
 156       ? '?access_token=' + this.auth.getAccessToken()
 157       : ''
 158
 159     switch (this.downloadType) {
 160       case 'direct':
 161         return file.fileDownloadUrl + suffix
 162
 163       case 'torrent':
 164         return file.torrentDownloadUrl + suffix
 165     }
 166   }
 167
 168   hasCaptions () {
 169     return this.getCaptions().length !== 0
 170   }
 171
 172   getCaption () {
 173     const caption = this.getCaptions()
 174                         .find(c => c.language.id === this.subtitleLanguageId)
 175
 176     if (!caption) {
 177       console.error('Cannot find caption %s.', this.subtitleLanguageId)
 178       return undefined
 179     }
 180
 181     return caption
 182   }
 183
 184   getCaptionLink () {
 185     const caption = this.getCaption()
 186     if (!caption) return ''
 187
 188     return window.location.origin + caption.captionPath
 189   }
 190
 191   isConfidentialVideo () {
 192     return this.video.privacy.id === VideoPrivacy.PRIVATE || this.video.privacy.id === VideoPrivacy.INTERNAL
 193   }
 194
 195   activateCopiedMessage () {
 196     this.notifier.success($localize`Copied`)
 197   }
 198
 199   switchToType (type: DownloadType) {
 200     this.type = type
 201   }
 202
 203   getFileMetadata () {
 204     const file = this.getVideoFile()
 205     if (!file) return undefined
 206
 207     return file.metadata
 208   }
 209
 210   private getMetadataFormat (format: any) {
 211     const keyToTranslateFunction = {
 212       'encoder': (value: string) => ({ label: $localize`Encoder`, value }),
 213       'format_long_name': (value: string) => ({ label: $localize`Format name`, value }),
 214       'size': (value: number) => ({ label: $localize`Size`, value: this.bytesPipe.transform(value, 2) }),
 215       'bit_rate': (value: number) => ({
 216         label: $localize`Bitrate`,
 217         value: `${this.numbersPipe.transform(value)}bps`
 218       })
 219     }
 220
 221     // flattening format
 222     const sanitizedFormat = Object.assign(format, format.tags)
 223     delete sanitizedFormat.tags
 224
 225     return mapValues(
 226       pick(sanitizedFormat, Object.keys(keyToTranslateFunction)),
 227       (val, key) => keyToTranslateFunction[key](val)
 228     )
 229   }
 230
 231   private getMetadataStream (streams: any[], type: 'video' | 'audio') {
 232     const stream = streams.find(s => s.codec_type === type)
 233     if (!stream) return undefined
 234
 235     let keyToTranslateFunction = {
 236       'codec_long_name': (value: string) => ({ label: $localize`Codec`, value }),
 237       'profile': (value: string) => ({ label: $localize`Profile`, value }),
 238       'bit_rate': (value: number) => ({
 239         label: $localize`Bitrate`,
 240         value: `${this.numbersPipe.transform(value)}bps`
 241       })
 242     }
 243
 244     if (type === 'video') {
 245       keyToTranslateFunction = Object.assign(keyToTranslateFunction, {
 246         'width': (value: number) => ({ label: $localize`Resolution`, value: `${value}x${stream.height}` }),
 247         'display_aspect_ratio': (value: string) => ({ label: $localize`Aspect ratio`, value }),
 248         'avg_frame_rate': (value: string) => ({ label: $localize`Average frame rate`, value }),
 249         'pix_fmt': (value: string) => ({ label: $localize`Pixel format`, value })
 250       })
 251     } else {
 252       keyToTranslateFunction = Object.assign(keyToTranslateFunction, {
 253         'sample_rate': (value: number) => ({ label: $localize`Sample rate`, value }),
 254         'channel_layout': (value: number) => ({ label: $localize`Channel Layout`, value })
 255       })
 256     }
 257
 258     return mapValues(
 259       pick(stream, Object.keys(keyToTranslateFunction)),
 260       (val, key) => keyToTranslateFunction[key](val)
 261     )
 262   }
 263
 264   private hydrateMetadataFromMetadataUrl (file: VideoFile) {
 265     const observable = this.videoService.getVideoFileMetadata(file.metadataUrl)
 266       .pipe(tap(res => file.metadata = res))
 267
 268     return observable.toPromise()
 269   }
 270 }