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

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