aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
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
parent33d7855229f45d73a767566f1dbcb87709211ebf (diff)
downloadPeerTube-b891f9bc612217b5b6f08a886c7d12eca260b9c8.tar.gz
PeerTube-b891f9bc612217b5b6f08a886c7d12eca260b9c8.tar.zst
PeerTube-b891f9bc612217b5b6f08a886c7d12eca260b9c8.zip
Fix watch page video change
Diffstat (limited to 'client')
-rw-r--r--client/package.json4
-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
-rw-r--r--client/yarn.lock20
10 files changed, 52 insertions, 48 deletions
diff --git a/client/package.json b/client/package.json
index d2d0a68c0..c865486e7 100644
--- a/client/package.json
+++ b/client/package.json
@@ -78,9 +78,9 @@
78 "tslint-config-standard": "^7.0.0", 78 "tslint-config-standard": "^7.0.0",
79 "typescript": "2.7.2", 79 "typescript": "2.7.2",
80 "uglifyjs-webpack-plugin": "^1.1.2", 80 "uglifyjs-webpack-plugin": "^1.1.2",
81 "video.js": "^6.2.0", 81 "video.js": "^6.7.3",
82 "videojs-dock": "^2.0.2", 82 "videojs-dock": "^2.0.2",
83 "videojs-hotkeys": "^0.2.20", 83 "videojs-hotkeys": "^0.2.21",
84 "webpack": "^3.3.0", 84 "webpack": "^3.3.0",
85 "webpack-bundle-analyzer": "^2.9.1", 85 "webpack-bundle-analyzer": "^2.9.1",
86 "webtorrent": "^0.98.0", 86 "webtorrent": "^0.98.0",
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 {
diff --git a/client/yarn.lock b/client/yarn.lock
index 003832adf..cdb3c33ec 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -7041,9 +7041,9 @@ video.js@^5.19.2:
7041 videojs-vtt.js "0.12.6" 7041 videojs-vtt.js "0.12.6"
7042 xhr "2.2.2" 7042 xhr "2.2.2"
7043 7043
7044video.js@^6.2.0: 7044video.js@^6.7.3:
7045 version "6.6.3" 7045 version "6.7.3"
7046 resolved "https://registry.yarnpkg.com/video.js/-/video.js-6.6.3.tgz#6ebf8ca607c95961bf07f0ecbe15f4b30c232d1e" 7046 resolved "https://registry.yarnpkg.com/video.js/-/video.js-6.7.3.tgz#616ab015a74bb1bc8b092e9b4b8022519756f7c0"
7047 dependencies: 7047 dependencies:
7048 babel-runtime "^6.9.2" 7048 babel-runtime "^6.9.2"
7049 global "4.3.2" 7049 global "4.3.2"
@@ -7051,7 +7051,7 @@ video.js@^6.2.0:
7051 tsml "1.0.1" 7051 tsml "1.0.1"
7052 videojs-font "2.1.0" 7052 videojs-font "2.1.0"
7053 videojs-ie8 "1.1.2" 7053 videojs-ie8 "1.1.2"
7054 videojs-vtt.js "0.12.4" 7054 videojs-vtt.js "0.12.5"
7055 xhr "2.4.0" 7055 xhr "2.4.0"
7056 7056
7057videojs-dock@^2.0.2: 7057videojs-dock@^2.0.2:
@@ -7069,9 +7069,9 @@ videojs-font@2.1.0:
7069 version "2.1.0" 7069 version "2.1.0"
7070 resolved "https://registry.yarnpkg.com/videojs-font/-/videojs-font-2.1.0.tgz#a25930a67f6c9cfbf2bb88dacb8c6b451f093379" 7070 resolved "https://registry.yarnpkg.com/videojs-font/-/videojs-font-2.1.0.tgz#a25930a67f6c9cfbf2bb88dacb8c6b451f093379"
7071 7071
7072videojs-hotkeys@^0.2.20: 7072videojs-hotkeys@^0.2.21:
7073 version "0.2.20" 7073 version "0.2.21"
7074 resolved "https://registry.yarnpkg.com/videojs-hotkeys/-/videojs-hotkeys-0.2.20.tgz#1dce9d42c29da392cf1742b89ba292c6706c8973" 7074 resolved "https://registry.yarnpkg.com/videojs-hotkeys/-/videojs-hotkeys-0.2.21.tgz#aa0a0a8484e8a8311ff9f4ba82d0934348566bad"
7075 7075
7076videojs-ie8@1.1.2: 7076videojs-ie8@1.1.2:
7077 version "1.1.2" 7077 version "1.1.2"
@@ -7083,9 +7083,9 @@ videojs-swf@5.4.1:
7083 version "5.4.1" 7083 version "5.4.1"
7084 resolved "https://registry.yarnpkg.com/videojs-swf/-/videojs-swf-5.4.1.tgz#2077ef71c749f2c7823ef49babae4dd2acb08f87" 7084 resolved "https://registry.yarnpkg.com/videojs-swf/-/videojs-swf-5.4.1.tgz#2077ef71c749f2c7823ef49babae4dd2acb08f87"
7085 7085
7086videojs-vtt.js@0.12.4: 7086videojs-vtt.js@0.12.5:
7087 version "0.12.4" 7087 version "0.12.5"
7088 resolved "https://registry.yarnpkg.com/videojs-vtt.js/-/videojs-vtt.js-0.12.4.tgz#38f2499e31efb3fa93590ddad4cb663275a4b161" 7088 resolved "https://registry.yarnpkg.com/videojs-vtt.js/-/videojs-vtt.js-0.12.5.tgz#32852732741c8b4e7a4314caa2cd93646a9c2d40"
7089 dependencies: 7089 dependencies:
7090 global "^4.3.1" 7090 global "^4.3.1"
7091 7091