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