Fix watch page video change
This commit is contained in:
Chocobozzz
parent
33d7855229
commit
b891f9bc61
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="row">
|
||||
<!-- We need the video container for videojs so we just hide it -->
|
||||
<div [hidden]="videoNotFound" id="video-container">
|
||||
<video id="video-element" class="video-js vjs-peertube-skin"></video>
|
||||
<div id="video-element-wrapper"></div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
#video-element {
|
||||
/deep/ .video-js {
|
||||
width: 888px;
|
||||
height: 500px;
|
||||
|
||||
|
|
|
|||
|
|
@ -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,9 +334,17 @@ 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')
|
||||
// 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(),
|
||||
|
|
@ -353,15 +362,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
|
||||
const self = this
|
||||
this.zone.runOutsideAngular(() => {
|
||||
videojs(this.playerElement, videojsOptions, function () {
|
||||
self.videojsInstance = 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)
|
||||
}
|
||||
|
||||
this.setVideoDescriptionHTML()
|
||||
this.setVideoLikesBarTooltipText()
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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_,
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ class SettingsButton extends Button {
|
|||
this.buildMenu()
|
||||
this.bindEvents()
|
||||
|
||||
// Prepare dialog
|
||||
// Prepare the dialog
|
||||
this.player().one('play', () => this.hideDialog())
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue