forks
/
peertube
1
0
Fork 0
Code Releases Activity

Fix watch page video change

This commit is contained in:
Chocobozzz 2018-04-03 17:33:39 +02:00
parent 33d7855229
commit b891f9bc61
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
10 changed files with 54 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/package.json
View File

@ -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",

2
client/src/app/videos/+video-watch/video-watch.component.html
View File

@ -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>

2
client/src/app/videos/+video-watch/video-watch.component.scss
View File

@ -6,7 +6,7 @@
display: flex;
justify-content: center;
#video-element {
/deep/ .video-js {
width: 888px;
height: 500px;

61
client/src/app/videos/+video-watch/video-watch.component.ts
View File

@ -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()

4
client/src/assets/player/peertube-videojs-plugin.ts
View File

@ -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')

3
client/src/assets/player/resolution-menu-button.ts
View File

@ -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_,

4
client/src/assets/player/resolution-menu-item.ts
View File

@ -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)
}
}

2
client/src/assets/player/settings-menu-button.ts
View File

@ -33,7 +33,7 @@ class SettingsButton extends Button {
this.buildMenu()
this.bindEvents()
// Prepare dialog
// Prepare the dialog
this.player().one('play', () => this.hideDialog())
}

2
client/src/sass/video-js-custom.scss
View File

@ -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 {

20
client/yarn.lock
View File

@ -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"