diff --git a/client/src/app/shared/video/modals/video-download.component.html b/client/src/app/shared/video/modals/video-download.component.html index 3619f24e5..ed61198c4 100644 --- a/client/src/app/shared/video/modals/video-download.component.html +++ b/client/src/app/shared/video/modals/video-download.component.html @@ -1,6 +1,17 @@ @@ -8,9 +19,12 @@
- +
@@ -21,7 +35,7 @@
-
+
diff --git a/client/src/app/shared/video/modals/video-download.component.scss b/client/src/app/shared/video/modals/video-download.component.scss index 3e826c3b6..09dd91aa9 100644 --- a/client/src/app/shared/video/modals/video-download.component.scss +++ b/client/src/app/shared/video/modals/video-download.component.scss @@ -13,6 +13,10 @@ } } +#dropdownDownloadType { + cursor: pointer; +} + .download-type { margin-top: 30px; diff --git a/client/src/app/shared/video/modals/video-download.component.ts b/client/src/app/shared/video/modals/video-download.component.ts index 712740086..c1ceca263 100644 --- a/client/src/app/shared/video/modals/video-download.component.ts +++ b/client/src/app/shared/video/modals/video-download.component.ts @@ -3,7 +3,9 @@ import { VideoDetails } from '../../../shared/video/video-details.model' import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap' import { I18n } from '@ngx-translate/i18n-polyfill' import { AuthService, Notifier } from '@app/core' -import { VideoPrivacy } from '@shared/models' +import { VideoPrivacy, VideoCaption } from '@shared/models' + +type DownloadType = 'video' | 'subtitles' @Component({ selector: 'my-video-download', @@ -15,10 +17,14 @@ export class VideoDownloadComponent { downloadType: 'direct' | 'torrent' = 'torrent' resolutionId: number | string = -1 + subtitleLanguageId: string video: VideoDetails + videoCaptions: VideoCaption[] activeModal: NgbActiveModal + type: DownloadType = 'video' + constructor ( private notifier: Notifier, private modalService: NgbModal, @@ -26,22 +32,31 @@ export class VideoDownloadComponent { private i18n: I18n ) { } + get typeText () { + return this.type === 'video' + ? this.i18n('video') + : this.i18n('subtitles') + } + getVideoFiles () { if (!this.video) return [] return this.video.getFiles() } - show (video: VideoDetails) { + show (video: VideoDetails, videoCaptions?: VideoCaption[]) { this.video = video + this.videoCaptions = videoCaptions && videoCaptions.length ? videoCaptions : undefined this.activeModal = this.modalService.open(this.modal) this.resolutionId = this.getVideoFiles()[0].resolution.id + if (this.videoCaptions) this.subtitleLanguageId = this.videoCaptions[0].language.id } onClose () { this.video = undefined + this.videoCaptions = undefined } download () { @@ -50,6 +65,12 @@ export class VideoDownloadComponent { } getLink () { + return this.type === 'subtitles' && this.videoCaptions + ? this.getSubtitlesLink() + : this.getVideoLink() + } + + getVideoLink () { // HTML select send us a string, so convert it to a number this.resolutionId = parseInt(this.resolutionId.toString(), 10) @@ -72,7 +93,15 @@ export class VideoDownloadComponent { } } + getSubtitlesLink () { + return window.location.origin + this.videoCaptions.find(caption => caption.language.id === this.subtitleLanguageId).captionPath + } + activateCopiedMessage () { this.notifier.success(this.i18n('Copied')) } + + switchToType (type: DownloadType) { + this.type = type + } } diff --git a/client/src/app/shared/video/video-actions-dropdown.component.ts b/client/src/app/shared/video/video-actions-dropdown.component.ts index 80407098b..afdeab18d 100644 --- a/client/src/app/shared/video/video-actions-dropdown.component.ts +++ b/client/src/app/shared/video/video-actions-dropdown.component.ts @@ -13,6 +13,7 @@ import { VideoReportComponent } from '@app/shared/video/modals/video-report.comp import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklist.component' import { VideoBlacklistService } from '@app/shared/video-blacklist' import { ScreenService } from '@app/shared/misc/screen.service' +import { VideoCaption } from '@shared/models' export type VideoActionsDisplayType = { playlist?: boolean @@ -37,6 +38,7 @@ export class VideoActionsDropdownComponent implements OnChanges { @ViewChild('videoBlacklistModal', { static: false }) videoBlacklistModal: VideoBlacklistComponent @Input() video: Video | VideoDetails + @Input() videoCaptions: VideoCaption[] = [] @Input() displayOptions: VideoActionsDisplayType = { playlist: false, @@ -105,7 +107,7 @@ export class VideoActionsDropdownComponent implements OnChanges { showDownloadModal () { this.modalOpened.emit() - this.videoDownloadModal.show(this.video as VideoDetails) + this.videoDownloadModal.show(this.video as VideoDetails, this.videoCaptions) } showReportModal () { diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 246eac2dd..908611ddf 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -109,7 +109,7 @@