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

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