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

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