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

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