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 @@ "tslint-config-standard": "^7.0.0", "typescript": "2.7.2", "uglifyjs-webpack-plugin": "^1.1.2", - "video.js": "^6.2.0", + "video.js": "^6.7.3", "videojs-dock": "^2.0.2", - "videojs-hotkeys": "^0.2.20", + "videojs-hotkeys": "^0.2.21", "webpack": "^3.3.0", "webpack-bundle-analyzer": "^2.9.1", "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 @@
- +
Video not found :'(
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 @@ display: flex; justify-content: center; - #video-element { + /deep/ .video-js { width: 888px; height: 500px; 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 { private otherVideos: Video[] = [] private paramsSub: Subscription + private videojsInstance: videojs.Player constructor ( private elementRef: ElementRef, @@ -333,36 +334,40 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (res === false) return this.redirectService.redirectToHomepage() } - // Player was already loaded - if (this.videoPlayerLoaded !== true) { - this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') - - const videojsOptions = getVideojsOptions({ - autoplay: this.isAutoplay(), - inactivityTimeout: 4000, - videoFiles: this.video.files, - playerElement: this.playerElement, - videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), - videoDuration: this.video.duration, - enableHotkeys: true, - peertubeLink: false, - poster: this.video.previewUrl - }) - - this.videoPlayerLoaded = true - - const self = this - this.zone.runOutsideAngular(() => { - videojs(this.playerElement, videojsOptions, function () { - self.player = this - this.on('customError', (event, data) => self.handleError(data.err)) - }) - }) - } else { - const videoViewUrl = this.videoService.getVideoViewUrl(this.video.uuid) - this.player.peertube().setVideoFiles(this.video.files, videoViewUrl, this.video.duration) + // Player was already loaded, remove old videojs + if (this.videojsInstance) { + this.videojsInstance.dispose() + this.videojsInstance = undefined } + // Build video element, because videojs remove it on dispose + const playerElementWrapper = this.elementRef.nativeElement.querySelector('#video-element-wrapper') + this.playerElement = document.createElement('video') + this.playerElement.className = 'video-js vjs-peertube-skin' + playerElementWrapper.appendChild(this.playerElement) + + const videojsOptions = getVideojsOptions({ + autoplay: this.isAutoplay(), + inactivityTimeout: 4000, + videoFiles: this.video.files, + playerElement: this.playerElement, + videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), + videoDuration: this.video.duration, + enableHotkeys: true, + peertubeLink: false, + poster: this.video.previewUrl + }) + + this.videoPlayerLoaded = true + + const self = this + this.zone.runOutsideAngular(() => { + self.videojsInstance = videojs(this.playerElement, videojsOptions, function () { + self.player = this + this.on('customError', (event, data) => self.handleError(data.err)) + }) + }) + this.setVideoDescriptionHTML() 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 { this.player.posterImage.hide() this.updateVideoFile(undefined, () => this.player.play()) } else { - // Proxify first play + // Proxy first play const oldPlay = this.player.play.bind(this.player) this.player.play = () => { this.updateVideoFile(undefined, () => oldPlay) @@ -308,7 +308,7 @@ class PeerTubePlugin extends Plugin { this.player.options_.inactivityTimeout = 0 } const enableInactivity = () => { - // this.player.options_.inactivityTimeout = saveInactivityTimeout + this.player.options_.inactivityTimeout = saveInactivityTimeout } 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 { } createMenu () { - const menu = new Menu(this.player()) - + const menu = new Menu(this.player_) for (const videoFile of this.player_.peertube().videoFiles) { menu.addChild(new ResolutionMenuItem( 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 { this.label = options.label this.id = options.id - player.peertube().on('videoFileUpdate', () => this.update()) + player.peertube().on('videoFileUpdate', () => this.updateSelection()) } handleClick (event) { @@ -22,7 +22,7 @@ class ResolutionMenuItem extends MenuItem { this.player_.peertube().updateResolution(this.id) } - update () { + updateSelection () { this.selected(this.player_.peertube().getCurrentResolutionId() === this.id) } } 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 { this.buildMenu() this.bindEvents() - // Prepare dialog + // Prepare the dialog this.player().one('play', () => this.hideDialog()) } 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; } .vjs-icon-placeholder::before { - transition: font-size 0.5s, opacity 0.5s; + transition: font-size 0.2s, opacity 0.2s; } &: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: videojs-vtt.js "0.12.6" xhr "2.2.2" -video.js@^6.2.0: - version "6.6.3" - resolved "https://registry.yarnpkg.com/video.js/-/video.js-6.6.3.tgz#6ebf8ca607c95961bf07f0ecbe15f4b30c232d1e" +video.js@^6.7.3: + version "6.7.3" + resolved "https://registry.yarnpkg.com/video.js/-/video.js-6.7.3.tgz#616ab015a74bb1bc8b092e9b4b8022519756f7c0" dependencies: babel-runtime "^6.9.2" global "4.3.2" @@ -7051,7 +7051,7 @@ video.js@^6.2.0: tsml "1.0.1" videojs-font "2.1.0" videojs-ie8 "1.1.2" - videojs-vtt.js "0.12.4" + videojs-vtt.js "0.12.5" xhr "2.4.0" videojs-dock@^2.0.2: @@ -7069,9 +7069,9 @@ videojs-font@2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/videojs-font/-/videojs-font-2.1.0.tgz#a25930a67f6c9cfbf2bb88dacb8c6b451f093379" -videojs-hotkeys@^0.2.20: - version "0.2.20" - resolved "https://registry.yarnpkg.com/videojs-hotkeys/-/videojs-hotkeys-0.2.20.tgz#1dce9d42c29da392cf1742b89ba292c6706c8973" +videojs-hotkeys@^0.2.21: + version "0.2.21" + resolved "https://registry.yarnpkg.com/videojs-hotkeys/-/videojs-hotkeys-0.2.21.tgz#aa0a0a8484e8a8311ff9f4ba82d0934348566bad" videojs-ie8@1.1.2: version "1.1.2" @@ -7083,9 +7083,9 @@ videojs-swf@5.4.1: version "5.4.1" resolved "https://registry.yarnpkg.com/videojs-swf/-/videojs-swf-5.4.1.tgz#2077ef71c749f2c7823ef49babae4dd2acb08f87" -videojs-vtt.js@0.12.4: - version "0.12.4" - resolved "https://registry.yarnpkg.com/videojs-vtt.js/-/videojs-vtt.js-0.12.4.tgz#38f2499e31efb3fa93590ddad4cb663275a4b161" +videojs-vtt.js@0.12.5: + version "0.12.5" + resolved "https://registry.yarnpkg.com/videojs-vtt.js/-/videojs-vtt.js-0.12.5.tgz#32852732741c8b4e7a4314caa2cd93646a9c2d40" dependencies: global "^4.3.1"