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

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