aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-04-03 17:33:39 +0200
committerChocobozzz <me@florianbigard.com>2018-04-03 17:33:39 +0200
commitb891f9bc612217b5b6f08a886c7d12eca260b9c8 (patch)
tree2457cc69161a47a1c07a77aaf0ef2c65beb47dfe /client/src
parent33d7855229f45d73a767566f1dbcb87709211ebf (diff)
downloadPeerTube-b891f9bc612217b5b6f08a886c7d12eca260b9c8.tar.gz
PeerTube-b891f9bc612217b5b6f08a886c7d12eca260b9c8.tar.zst
PeerTube-b891f9bc612217b5b6f08a886c7d12eca260b9c8.zip
Fix watch page video change
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts57
-rw-r--r--client/src/assets/player/peertube-videojs-plugin.ts4
-rw-r--r--client/src/assets/player/resolution-menu-button.ts3
-rw-r--r--client/src/assets/player/resolution-menu-item.ts4
-rw-r--r--client/src/assets/player/settings-menu-button.ts2
-rw-r--r--client/src/sass/video-js-custom.scss2
8 files changed, 40 insertions, 36 deletions
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 9c6038a5e..0385fab7c 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -1,7 +1,7 @@
1<div class="row"> 1<div class="row">
2 <!-- We need the video container for videojs so we just hide it --> 2 <!-- We need the video container for videojs so we just hide it -->
3 <div [hidden]="videoNotFound" id="video-container"> 3 <div [hidden]="videoNotFound" id="video-container">
4 <video id="video-element" class="video-js vjs-peertube-skin"></video> 4 <div id="video-element-wrapper"></div>
5 </div> 5 </div>
6 6
7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div> 7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 10993735b..109357b59 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -6,7 +6,7 @@
6 display: flex; 6 display: flex;
7 justify-content: center; 7 justify-content: center;
8 8
9 #video-element { 9 /deep/ .video-js {
10 width: 888px; 10 width: 888px;
11 height: 500px; 11 height: 500px;
12 12
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 0f7c76d0b..9563394dc 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -56,6 +56,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
56 56
57 private otherVideos: Video[] = [] 57 private otherVideos: Video[] = []
58 private paramsSub: Subscription 58 private paramsSub: Subscription
59 private videojsInstance: videojs.Player
59 60
60 constructor ( 61 constructor (
61 private elementRef: ElementRef, 62 private elementRef: ElementRef,
@@ -333,35 +334,39 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
333 if (res === false) return this.redirectService.redirectToHomepage() 334 if (res === false) return this.redirectService.redirectToHomepage()
334 } 335 }
335 336
336 // Player was already loaded 337 // Player was already loaded, remove old videojs
337 if (this.videoPlayerLoaded !== true) { 338 if (this.videojsInstance) {
338 this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') 339 this.videojsInstance.dispose()
339 340 this.videojsInstance = undefined
340 const videojsOptions = getVideojsOptions({ 341 }
341 autoplay: this.isAutoplay(), 342
342 inactivityTimeout: 4000, 343 // Build video element, because videojs remove it on dispose
343 videoFiles: this.video.files, 344 const playerElementWrapper = this.elementRef.nativeElement.querySelector('#video-element-wrapper')
344 playerElement: this.playerElement, 345 this.playerElement = document.createElement('video')
345 videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), 346 this.playerElement.className = 'video-js vjs-peertube-skin'
346 videoDuration: this.video.duration, 347 playerElementWrapper.appendChild(this.playerElement)
347 enableHotkeys: true, 348
348 peertubeLink: false, 349 const videojsOptions = getVideojsOptions({
349 poster: this.video.previewUrl 350 autoplay: this.isAutoplay(),
350 }) 351 inactivityTimeout: 4000,
352 videoFiles: this.video.files,
353 playerElement: this.playerElement,
354 videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid),
355 videoDuration: this.video.duration,
356 enableHotkeys: true,
357 peertubeLink: false,
358 poster: this.video.previewUrl
359 })
351 360
352 this.videoPlayerLoaded = true 361 this.videoPlayerLoaded = true
353 362
354 const self = this 363 const self = this
355 this.zone.runOutsideAngular(() => { 364 this.zone.runOutsideAngular(() => {
356 videojs(this.playerElement, videojsOptions, function () { 365 self.videojsInstance = videojs(this.playerElement, videojsOptions, function () {
357 self.player = this 366 self.player = this
358 this.on('customError', (event, data) => self.handleError(data.err)) 367 this.on('customError', (event, data) => self.handleError(data.err))
359 })
360 }) 368 })
361 } else { 369 })
362 const videoViewUrl = this.videoService.getVideoViewUrl(this.video.uuid)
363 this.player.peertube().setVideoFiles(this.video.files, videoViewUrl, this.video.duration)
364 }
365 370
366 this.setVideoDescriptionHTML() 371 this.setVideoDescriptionHTML()
367 this.setVideoLikesBarTooltipText() 372 this.setVideoLikesBarTooltipText()
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 425c8c7a0..10c31cc0f 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -215,7 +215,7 @@ class PeerTubePlugin extends Plugin {
215 this.player.posterImage.hide() 215 this.player.posterImage.hide()
216 this.updateVideoFile(undefined, () => this.player.play()) 216 this.updateVideoFile(undefined, () => this.player.play())
217 } else { 217 } else {
218 // Proxify first play 218 // Proxy first play
219 const oldPlay = this.player.play.bind(this.player) 219 const oldPlay = this.player.play.bind(this.player)
220 this.player.play = () => { 220 this.player.play = () => {
221 this.updateVideoFile(undefined, () => oldPlay) 221 this.updateVideoFile(undefined, () => oldPlay)
@@ -308,7 +308,7 @@ class PeerTubePlugin extends Plugin {
308 this.player.options_.inactivityTimeout = 0 308 this.player.options_.inactivityTimeout = 0
309 } 309 }
310 const enableInactivity = () => { 310 const enableInactivity = () => {
311 // this.player.options_.inactivityTimeout = saveInactivityTimeout 311 this.player.options_.inactivityTimeout = saveInactivityTimeout
312 } 312 }
313 313
314 const settingsDialog = this.player.children_.find(c => c.name_ === 'SettingsDialog') 314 const settingsDialog = this.player.children_.find(c => c.name_ === 'SettingsDialog')
diff --git a/client/src/assets/player/resolution-menu-button.ts b/client/src/assets/player/resolution-menu-button.ts
index c927b084d..712e71192 100644
--- a/client/src/assets/player/resolution-menu-button.ts
+++ b/client/src/assets/player/resolution-menu-button.ts
@@ -35,8 +35,7 @@ class ResolutionMenuButton extends MenuButton {
35 } 35 }
36 36
37 createMenu () { 37 createMenu () {
38 const menu = new Menu(this.player()) 38 const menu = new Menu(this.player_)
39
40 for (const videoFile of this.player_.peertube().videoFiles) { 39 for (const videoFile of this.player_.peertube().videoFiles) {
41 menu.addChild(new ResolutionMenuItem( 40 menu.addChild(new ResolutionMenuItem(
42 this.player_, 41 this.player_,
diff --git a/client/src/assets/player/resolution-menu-item.ts b/client/src/assets/player/resolution-menu-item.ts
index 95e0ed1f8..8ad834c59 100644
--- a/client/src/assets/player/resolution-menu-item.ts
+++ b/client/src/assets/player/resolution-menu-item.ts
@@ -13,7 +13,7 @@ class ResolutionMenuItem extends MenuItem {
13 this.label = options.label 13 this.label = options.label
14 this.id = options.id 14 this.id = options.id
15 15
16 player.peertube().on('videoFileUpdate', () => this.update()) 16 player.peertube().on('videoFileUpdate', () => this.updateSelection())
17 } 17 }
18 18
19 handleClick (event) { 19 handleClick (event) {
@@ -22,7 +22,7 @@ class ResolutionMenuItem extends MenuItem {
22 this.player_.peertube().updateResolution(this.id) 22 this.player_.peertube().updateResolution(this.id)
23 } 23 }
24 24
25 update () { 25 updateSelection () {
26 this.selected(this.player_.peertube().getCurrentResolutionId() === this.id) 26 this.selected(this.player_.peertube().getCurrentResolutionId() === this.id)
27 } 27 }
28} 28}
diff --git a/client/src/assets/player/settings-menu-button.ts b/client/src/assets/player/settings-menu-button.ts
index c48e1382c..bf6ac145a 100644
--- a/client/src/assets/player/settings-menu-button.ts
+++ b/client/src/assets/player/settings-menu-button.ts
@@ -33,7 +33,7 @@ class SettingsButton extends Button {
33 this.buildMenu() 33 this.buildMenu()
34 this.bindEvents() 34 this.bindEvents()
35 35
36 // Prepare dialog 36 // Prepare the dialog
37 this.player().one('play', () => this.hideDialog()) 37 this.player().one('play', () => this.hideDialog())
38 } 38 }
39 39
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index c533bd116..5fd2f9567 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -77,7 +77,7 @@ $setting-transition-easing: ease-out;
77 } 77 }
78 78
79 .vjs-icon-placeholder::before { 79 .vjs-icon-placeholder::before {
80 transition: font-size 0.5s, opacity 0.5s; 80 transition: font-size 0.2s, opacity 0.2s;
81 } 81 }
82 82
83 &:hover { 83 &:hover {