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