aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-07-13 18:21:19 +0200
committerChocobozzz <me@florianbigard.com>2018-07-16 11:50:08 +0200
commit16f7022b06fb76c0b00c23c970bc8df605b0ec63 (patch)
tree0677c72b449485dcaa87ee2b470dfb1a8124b9e0 /client/src/app/videos
parent40e87e9ecc54e3513fb586928330a7855eb192c6 (diff)
downloadPeerTube-16f7022b06fb76c0b00c23c970bc8df605b0ec63.tar.gz
PeerTube-16f7022b06fb76c0b00c23c970bc8df605b0ec63.tar.zst
PeerTube-16f7022b06fb76c0b00c23c970bc8df605b0ec63.zip
Handle subtitles in player
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts37
1 files changed, 26 insertions, 11 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 8adf97d48..601c6a38d 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -6,11 +6,11 @@ import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
6import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' 6import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component'
7import { MetaService } from '@ngx-meta/core' 7import { MetaService } from '@ngx-meta/core'
8import { NotificationsService } from 'angular2-notifications' 8import { NotificationsService } from 'angular2-notifications'
9import { Subscription } from 'rxjs' 9import { forkJoin, Subscription } from 'rxjs'
10import * as videojs from 'video.js' 10import * as videojs from 'video.js'
11import 'videojs-hotkeys' 11import 'videojs-hotkeys'
12import * as WebTorrent from 'webtorrent' 12import * as WebTorrent from 'webtorrent'
13import { UserVideoRateType, VideoPrivacy, VideoRateType, VideoState } from '../../../../../shared' 13import { ResultList, UserVideoRateType, VideoPrivacy, VideoRateType, VideoState } from '../../../../../shared'
14import '../../../assets/player/peertube-videojs-plugin' 14import '../../../assets/player/peertube-videojs-plugin'
15import { AuthService, ConfirmService } from '../../core' 15import { AuthService, ConfirmService } from '../../core'
16import { RestExtractor, VideoBlacklistService } from '../../shared' 16import { RestExtractor, VideoBlacklistService } from '../../shared'
@@ -26,6 +26,9 @@ import { ServerService } from '@app/core'
26import { I18n } from '@ngx-translate/i18n-polyfill' 26import { I18n } from '@ngx-translate/i18n-polyfill'
27import { environment } from '../../../environments/environment' 27import { environment } from '../../../environments/environment'
28import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils' 28import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
29import { VideoCaptionService } from '@app/shared/video-caption'
30import { VideoCaption } from '../../../../../shared/models/videos/video-caption.model'
31import { VideoJSCaption } from '../../../assets/player/peertube-videojs-typings'
29 32
30@Component({ 33@Component({
31 selector: 'my-video-watch', 34 selector: 'my-video-watch',
@@ -74,6 +77,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
74 private markdownService: MarkdownService, 77 private markdownService: MarkdownService,
75 private zone: NgZone, 78 private zone: NgZone,
76 private redirectService: RedirectService, 79 private redirectService: RedirectService,
80 private videoCaptionService: VideoCaptionService,
77 private i18n: I18n, 81 private i18n: I18n,
78 @Inject(LOCALE_ID) private localeId: string 82 @Inject(LOCALE_ID) private localeId: string
79 ) {} 83 ) {}
@@ -109,14 +113,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
109 if (this.player) this.player.pause() 113 if (this.player) this.player.pause()
110 114
111 // Video did change 115 // Video did change
112 this.videoService 116 forkJoin(
113 .getVideo(uuid) 117 this.videoService.getVideo(uuid),
114 .pipe(catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ]))) 118 this.videoCaptionService.listCaptions(uuid)
115 .subscribe(video => { 119 )
116 const startTime = this.route.snapshot.queryParams.start 120 .pipe(
117 this.onVideoFetched(video, startTime) 121 catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ]))
118 .catch(err => this.handleError(err)) 122 )
119 }) 123 .subscribe(([ video, captionsResult ]) => {
124 const startTime = this.route.snapshot.queryParams.start
125 this.onVideoFetched(video, captionsResult.data, startTime)
126 .catch(err => this.handleError(err))
127 })
120 }) 128 })
121 } 129 }
122 130
@@ -331,7 +339,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
331 ) 339 )
332 } 340 }
333 341
334 private async onVideoFetched (video: VideoDetails, startTime = 0) { 342 private async onVideoFetched (video: VideoDetails, videoCaptions: VideoCaption[], startTime = 0) {
335 this.video = video 343 this.video = video
336 344
337 // Re init attributes 345 // Re init attributes
@@ -358,10 +366,17 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
358 this.playerElement.setAttribute('playsinline', 'true') 366 this.playerElement.setAttribute('playsinline', 'true')
359 playerElementWrapper.appendChild(this.playerElement) 367 playerElementWrapper.appendChild(this.playerElement)
360 368
369 const playerCaptions = videoCaptions.map(c => ({
370 label: c.language.label,
371 language: c.language.id,
372 src: environment.apiUrl + c.captionPath
373 }))
374
361 const videojsOptions = getVideojsOptions({ 375 const videojsOptions = getVideojsOptions({
362 autoplay: this.isAutoplay(), 376 autoplay: this.isAutoplay(),
363 inactivityTimeout: 2500, 377 inactivityTimeout: 2500,
364 videoFiles: this.video.files, 378 videoFiles: this.video.files,
379 videoCaptions: playerCaptions,
365 playerElement: this.playerElement, 380 playerElement: this.playerElement,
366 videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null, 381 videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null,
367 videoDuration: this.video.duration, 382 videoDuration: this.video.duration,