aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-01-23 15:36:45 +0100
committerChocobozzz <chocobozzz@cpy.re>2019-02-11 09:13:02 +0100
commit2adfc7ea9a1f858db874df9fe322e7ae833db77c (patch)
treee27c6ebe01b7c96ea0e053839a38fc1f824d1284 /client/src/app/videos
parent7eeb6a0ba4028d0e20847b846332dd0b7747c7f8 (diff)
downloadPeerTube-2adfc7ea9a1f858db874df9fe322e7ae833db77c.tar.gz
PeerTube-2adfc7ea9a1f858db874df9fe322e7ae833db77c.tar.zst
PeerTube-2adfc7ea9a1f858db874df9fe322e7ae833db77c.zip
Refractor videojs player
Add fake p2p-media-loader plugin
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts77
1 files changed, 37 insertions, 40 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 ee504bc58..6e38af195 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -7,14 +7,9 @@ import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-supp
7import { MetaService } from '@ngx-meta/core' 7import { MetaService } from '@ngx-meta/core'
8import { Notifier, ServerService } from '@app/core' 8import { Notifier, ServerService } from '@app/core'
9import { forkJoin, Subscription } from 'rxjs' 9import { forkJoin, Subscription } from 'rxjs'
10// FIXME: something weird with our path definition in tsconfig and typings
11// @ts-ignore
12import videojs from 'video.js'
13import 'videojs-hotkeys'
14import { Hotkey, HotkeysService } from 'angular2-hotkeys' 10import { Hotkey, HotkeysService } from 'angular2-hotkeys'
15import * as WebTorrent from 'webtorrent' 11import * as WebTorrent from 'webtorrent'
16import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared' 12import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared'
17import '../../../assets/player/peertube-videojs-plugin'
18import { AuthService, ConfirmService } from '../../core' 13import { AuthService, ConfirmService } from '../../core'
19import { RestExtractor, VideoBlacklistService } from '../../shared' 14import { RestExtractor, VideoBlacklistService } from '../../shared'
20import { VideoDetails } from '../../shared/video/video-details.model' 15import { VideoDetails } from '../../shared/video/video-details.model'
@@ -24,12 +19,11 @@ import { VideoReportComponent } from './modal/video-report.component'
24import { VideoShareComponent } from './modal/video-share.component' 19import { VideoShareComponent } from './modal/video-share.component'
25import { VideoBlacklistComponent } from './modal/video-blacklist.component' 20import { VideoBlacklistComponent } from './modal/video-blacklist.component'
26import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component' 21import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component'
27import { addContextMenu, getVideojsOptions, loadLocaleInVideoJS } from '../../../assets/player/peertube-player'
28import { I18n } from '@ngx-translate/i18n-polyfill' 22import { I18n } from '@ngx-translate/i18n-polyfill'
29import { environment } from '../../../environments/environment' 23import { environment } from '../../../environments/environment'
30import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
31import { VideoCaptionService } from '@app/shared/video-caption' 24import { VideoCaptionService } from '@app/shared/video-caption'
32import { MarkdownService } from '@app/shared/renderer' 25import { MarkdownService } from '@app/shared/renderer'
26import { PeertubePlayerManager } from '../../../assets/player/peertube-player-manager'
33 27
34@Component({ 28@Component({
35 selector: 'my-video-watch', 29 selector: 'my-video-watch',
@@ -46,7 +40,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
46 @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent 40 @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
47 @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent 41 @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
48 42
49 player: videojs.Player 43 player: any
50 playerElement: HTMLVideoElement 44 playerElement: HTMLVideoElement
51 userRating: UserVideoRateType = null 45 userRating: UserVideoRateType = null
52 video: VideoDetails = null 46 video: VideoDetails = null
@@ -61,7 +55,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
61 remoteServerDown = false 55 remoteServerDown = false
62 hotkeys: Hotkey[] 56 hotkeys: Hotkey[]
63 57
64 private videojsLocaleLoaded = false
65 private paramsSub: Subscription 58 private paramsSub: Subscription
66 59
67 constructor ( 60 constructor (
@@ -402,41 +395,45 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
402 src: environment.apiUrl + c.captionPath 395 src: environment.apiUrl + c.captionPath
403 })) 396 }))
404 397
405 const videojsOptions = getVideojsOptions({ 398 const options = {
406 autoplay: this.isAutoplay(), 399 common: {
407 inactivityTimeout: 2500, 400 autoplay: this.isAutoplay(),
408 videoFiles: this.video.files, 401 playerElement: this.playerElement,
409 videoCaptions: playerCaptions, 402 videoDuration: this.video.duration,
410 playerElement: this.playerElement, 403 enableHotkeys: true,
411 videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null, 404 inactivityTimeout: 2500,
412 videoDuration: this.video.duration, 405 poster: this.video.previewUrl,
413 enableHotkeys: true, 406 startTime,
414 peertubeLink: false, 407
415 poster: this.video.previewUrl, 408 theaterMode: true,
416 startTime, 409 captions: videoCaptions.length !== 0,
417 subtitle: urlOptions.subtitle, 410 peertubeLink: false,
418 theaterMode: true, 411
419 language: this.localeId, 412 videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null,
420 413 embedUrl: this.video.embedUrl,
421 userWatching: this.user && this.user.videosHistoryEnabled === true ? { 414
422 url: this.videoService.getUserWatchingVideoUrl(this.video.uuid), 415 language: this.localeId,
423 authorizationHeader: this.authService.getRequestHeaderValue() 416
424 } : undefined 417 subtitle: urlOptions.subtitle,
425 })
426 418
427 if (this.videojsLocaleLoaded === false) { 419 userWatching: this.user && this.user.videosHistoryEnabled === true ? {
428 await loadLocaleInVideoJS(environment.apiUrl, videojs, isOnDevLocale() ? getDevLocale() : this.localeId) 420 url: this.videoService.getUserWatchingVideoUrl(this.video.uuid),
429 this.videojsLocaleLoaded = true 421 authorizationHeader: this.authService.getRequestHeaderValue()
422 } : undefined,
423
424 serverUrl: environment.apiUrl,
425
426 videoCaptions: playerCaptions
427 },
428
429 webtorrent: {
430 videoFiles: this.video.files
431 }
430 } 432 }
431 433
432 const self = this
433 this.zone.runOutsideAngular(async () => { 434 this.zone.runOutsideAngular(async () => {
434 videojs(this.playerElement, videojsOptions, function (this: videojs.Player) { 435 this.player = await PeertubePlayerManager.initialize('webtorrent', options)
435 self.player = this 436 this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
436 this.on('customError', ({ err }: { err: any }) => self.handleError(err))
437
438 addContextMenu(self.player, self.video.embedUrl)
439 })
440 }) 437 })
441 438
442 this.setVideoDescriptionHTML() 439 this.setVideoDescriptionHTML()