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

   1 import { mapValues, pick } from 'lodash-es'
   2 import { firstValueFrom } 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 { logger } from '@root-helpers/logger'
   8 import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models'
   9 import { BytesPipe, NumberFormatterPipe, VideoDetails, VideoService } from '../shared-main'
  10
  11 type DownloadType = 'video' | 'subtitles'
  12 type FileMetadata = { [key: string]: { label: string, value: string }}
  13
  14 @Component({
  15   selector: 'my-video-download',
  16   templateUrl: './video-download.component.html',
  17   styleUrls: [ './video-download.component.scss' ]
  18 })
  19 export class VideoDownloadComponent {
  20   @ViewChild('modal', { static: true }) modal: ElementRef
  21
  22   downloadType: 'direct' | 'torrent' = 'direct'
  23
  24   resolutionId: number | string = -1
  25   subtitleLanguageId: string
  26
  27   videoFileMetadataFormat: FileMetadata
  28   videoFileMetadataVideoStream: FileMetadata | undefined
  29   videoFileMetadataAudioStream: FileMetadata | undefined
  30
  31   isAdvancedCustomizationCollapsed = true
  32
  33   type: DownloadType = 'video'
  34
  35   private activeModal: NgbModalRef
  36
  37   private bytesPipe: BytesPipe
  38   private numbersPipe: NumberFormatterPipe
  39
  40   private video: VideoDetails
  41   private videoCaptions: VideoCaption[]
  42
  43   constructor (
  44     @Inject(LOCALE_ID) private localeId: string,
  45     private notifier: Notifier,
  46     private modalService: NgbModal,
  47     private videoService: VideoService,
  48     private auth: AuthService,
  49     private hooks: HooksService
  50   ) {
  51     this.bytesPipe = new BytesPipe()
  52     this.numbersPipe = new NumberFormatterPipe(this.localeId)
  53   }
  54
  55   get typeText () {
  56     return this.type === 'video'
  57       ? $localize`video`
  58       : $localize`subtitles`
  59   }
  60
  61   getVideoFiles () {
  62     if (!this.video) return []
  63
  64     return this.video.getFiles()
  65   }
  66
  67   getCaptions () {
  68     if (!this.videoCaptions) return []
  69
  70     return this.videoCaptions
  71   }
  72
  73   show (video: VideoDetails, videoCaptions?: VideoCaption[]) {
  74     this.video = video
  75     this.videoCaptions = videoCaptions
  76
  77     this.activeModal = this.modalService.open(this.modal, { centered: true })
  78
  79     if (this.hasFiles()) {
  80       this.onResolutionIdChange(this.getVideoFiles()[0].resolution.id)
  81     }
  82
  83     if (this.hasCaptions()) {
  84       this.subtitleLanguageId = this.videoCaptions[0].language.id
  85     }
  86
  87     this.activeModal.shown.subscribe(() => {
  88       this.hooks.runAction('action:modal.video-download.shown', 'common')
  89     })
  90   }
  91
  92   onClose () {
  93     this.video = undefined
  94     this.videoCaptions = undefined
  95   }
  96
  97   download () {
  98     window.location.assign(this.getLink())
  99
 100     this.activeModal.close()
 101   }
 102
 103   getLink () {
 104     return this.type === 'subtitles' && this.videoCaptions
 105       ? this.getCaptionLink()
 106       : this.getVideoFileLink()
 107   }
 108
 109   async onResolutionIdChange (resolutionId: number) {
 110     this.resolutionId = resolutionId
 111
 112     const videoFile = this.getVideoFile()
 113
 114     if (!videoFile.metadata) {
 115       if (!videoFile.metadataUrl) return
 116
 117       await this.hydrateMetadataFromMetadataUrl(videoFile)
 118     }
 119
 120     if (!videoFile.metadata) return
 121
 122     this.videoFileMetadataFormat = videoFile
 123       ? this.getMetadataFormat(videoFile.metadata.format)
 124       : undefined
 125     this.videoFileMetadataVideoStream = videoFile
 126       ? this.getMetadataStream(videoFile.metadata.streams, 'video')
 127       : undefined
 128     this.videoFileMetadataAudioStream = videoFile
 129       ? this.getMetadataStream(videoFile.metadata.streams, 'audio')
 130       : undefined
 131   }
 132
 133   onSubtitleIdChange (subtitleId: string) {
 134     this.subtitleLanguageId = subtitleId
 135   }
 136
 137   hasFiles () {
 138     return this.getVideoFiles().length !== 0
 139   }
 140
 141   getVideoFile () {
 142     const file = this.getVideoFiles()
 143                      .find(f => f.resolution.id === this.resolutionId)
 144
 145     if (!file) {
 146       logger.error(`Could not find file with resolution ${this.resolutionId}`)
 147       return undefined
 148     }
 149
 150     return file
 151   }
 152
 153   getVideoFileLink () {
 154     const file = this.getVideoFile()
 155     if (!file) return ''
 156
 157     const suffix = this.isConfidentialVideo()
 158       ? '?access_token=' + this.auth.getAccessToken()
 159       : ''
 160
 161     switch (this.downloadType) {
 162       case 'direct':
 163         return file.fileDownloadUrl + suffix
 164
 165       case 'torrent':
 166         return file.torrentDownloadUrl + suffix
 167     }
 168   }
 169
 170   hasCaptions () {
 171     return this.getCaptions().length !== 0
 172   }
 173
 174   getCaption () {
 175     const caption = this.getCaptions()
 176                         .find(c => c.language.id === this.subtitleLanguageId)
 177
 178     if (!caption) {
 179       logger.error(`Cannot find caption ${this.subtitleLanguageId}`)
 180       return undefined
 181     }
 182
 183     return caption
 184   }
 185
 186   getCaptionLink () {
 187     const caption = this.getCaption()
 188     if (!caption) return ''
 189
 190     return window.location.origin + caption.captionPath
 191   }
 192
 193   isConfidentialVideo () {
 194     return this.video.privacy.id === VideoPrivacy.PRIVATE || this.video.privacy.id === VideoPrivacy.INTERNAL
 195   }
 196
 197   switchToType (type: DownloadType) {
 198     this.type = type
 199   }
 200
 201   getFileMetadata () {
 202     const file = this.getVideoFile()
 203     if (!file) return undefined
 204
 205     return file.metadata
 206   }
 207
 208   private getMetadataFormat (format: any) {
 209     const keyToTranslateFunction = {
 210       encoder: (value: string) => ({ label: $localize`Encoder`, value }),
 211       format_long_name: (value: string) => ({ label: $localize`Format name`, value }),
 212       size: (value: number) => ({ label: $localize`Size`, value: this.bytesPipe.transform(value, 2) }),
 213       bit_rate: (value: number) => ({
 214         label: $localize`Bitrate`,
 215         value: `${this.numbersPipe.transform(value)}bps`
 216       })
 217     }
 218
 219     // flattening format
 220     const sanitizedFormat = Object.assign(format, format.tags)
 221     delete sanitizedFormat.tags
 222
 223     return mapValues(
 224       pick(sanitizedFormat, Object.keys(keyToTranslateFunction)),
 225       (val, key) => keyToTranslateFunction[key](val)
 226     )
 227   }
 228
 229   private getMetadataStream (streams: any[], type: 'video' | 'audio') {
 230     const stream = streams.find(s => s.codec_type === type)
 231     if (!stream) return undefined
 232
 233     let keyToTranslateFunction = {
 234       codec_long_name: (value: string) => ({ label: $localize`Codec`, value }),
 235       profile: (value: string) => ({ label: $localize`Profile`, value }),
 236       bit_rate: (value: number) => ({
 237         label: $localize`Bitrate`,
 238         value: `${this.numbersPipe.transform(value)}bps`
 239       })
 240     }
 241
 242     if (type === 'video') {
 243       keyToTranslateFunction = Object.assign(keyToTranslateFunction, {
 244         width: (value: number) => ({ label: $localize`Resolution`, value: `${value}x${stream.height}` }),
 245         display_aspect_ratio: (value: string) => ({ label: $localize`Aspect ratio`, value }),
 246         avg_frame_rate: (value: string) => ({ label: $localize`Average frame rate`, value }),
 247         pix_fmt: (value: string) => ({ label: $localize`Pixel format`, value })
 248       })
 249     } else {
 250       keyToTranslateFunction = Object.assign(keyToTranslateFunction, {
 251         sample_rate: (value: number) => ({ label: $localize`Sample rate`, value }),
 252         channel_layout: (value: number) => ({ label: $localize`Channel Layout`, value })
 253       })
 254     }
 255
 256     return mapValues(
 257       pick(stream, Object.keys(keyToTranslateFunction)),
 258       (val, key) => keyToTranslateFunction[key](val)
 259     )
 260   }
 261
 262   private hydrateMetadataFromMetadataUrl (file: VideoFile) {
 263     const observable = this.videoService.getVideoFileMetadata(file.metadataUrl)
 264       .pipe(tap(res => file.metadata = res))
 265
 266     return firstValueFrom(observable)
 267   }
 268 }