mirror of https://github.com/Chocobozzz/PeerTube
Cleaner videojs control bar implementation
Chocobozzz
parent
c7bfd4532e
commit
3ec8dc0962
|
|
@ -346,13 +346,35 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
peertube: {
|
||||
videoFiles: this.video.files,
|
||||
playerElement: this.playerElement,
|
||||
peerTubeLink: false,
|
||||
videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid),
|
||||
videoDuration: this.video.duration
|
||||
},
|
||||
hotkeys: {
|
||||
enableVolumeScroll: false
|
||||
}
|
||||
},
|
||||
controlBar: {
|
||||
children: [
|
||||
'playToggle',
|
||||
'currentTimeDisplay',
|
||||
'timeDivider',
|
||||
'durationDisplay',
|
||||
'liveDisplay',
|
||||
|
||||
'flexibleWidthSpacer',
|
||||
'progressControl',
|
||||
|
||||
'webTorrentButton',
|
||||
|
||||
'playbackRateMenuButton',
|
||||
|
||||
'muteToggle',
|
||||
'volumeControl',
|
||||
|
||||
'resolutionMenuButton',
|
||||
|
||||
'fullscreenToggle'
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ interface VideoJSComponentInterface {
|
|||
type PeertubePluginOptions = {
|
||||
videoFiles: VideoFile[]
|
||||
playerElement: HTMLVideoElement
|
||||
peerTubeLink: boolean
|
||||
videoViewUrl: string
|
||||
videoDuration: number
|
||||
}
|
||||
|
|
@ -120,7 +119,7 @@ class ResolutionMenuButton extends MenuButton {
|
|||
MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
|
||||
|
||||
const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
|
||||
class PeertubeLinkButton extends Button {
|
||||
class PeerTubeLinkButton extends Button {
|
||||
|
||||
createEl () {
|
||||
const link = document.createElement('a')
|
||||
|
|
@ -141,7 +140,7 @@ class PeertubeLinkButton extends Button {
|
|||
this.parentNode.removeChild(this)
|
||||
}
|
||||
}
|
||||
Button.registerComponent('PeerTubeLinkButton', PeertubeLinkButton)
|
||||
Button.registerComponent('PeerTubeLinkButton', PeerTubeLinkButton)
|
||||
|
||||
class WebTorrentButton extends Button {
|
||||
createEl () {
|
||||
|
|
@ -392,20 +391,6 @@ class PeerTubePlugin extends Plugin {
|
|||
}
|
||||
|
||||
private initializePlayer (options: PeertubePluginOptions) {
|
||||
const controlBar = this.player.controlBar
|
||||
|
||||
const menuButton = new ResolutionMenuButton(this.player, options)
|
||||
const fullscreenElement = controlBar.fullscreenToggle.el()
|
||||
controlBar.resolutionSwitcher = controlBar.el().insertBefore(menuButton.el(), fullscreenElement)
|
||||
|
||||
if (options.peerTubeLink === true) {
|
||||
const peerTubeLinkButton = new PeertubeLinkButton(this.player)
|
||||
controlBar.peerTubeLink = controlBar.el().insertBefore(peerTubeLinkButton.el(), fullscreenElement)
|
||||
}
|
||||
|
||||
const webTorrentButton = new WebTorrentButton(this.player)
|
||||
controlBar.webTorrent = controlBar.el().insertBefore(webTorrentButton.el(), controlBar.progressControl.el())
|
||||
|
||||
if (this.autoplay === true) {
|
||||
this.updateVideoFile(undefined, () => this.player.play())
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin disable-outline {
|
||||
outline: none;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0
|
||||
}
|
||||
}
|
||||
|
||||
@mixin peertube-input-text($width) {
|
||||
display: inline-block;
|
||||
height: $button-height;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
@charset "utf-8";// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin
|
||||
@import '_variables';
|
||||
@import '_mixins';
|
||||
|
||||
$primary-foreground-color: #fff;
|
||||
$primary-background-color: #000;
|
||||
$font-size: 13px;
|
||||
|
|
@ -139,7 +141,8 @@ $control-bar-height: 34px;
|
|||
}
|
||||
|
||||
.vjs-play-control {
|
||||
outline: 0;
|
||||
@include disable-outline;
|
||||
|
||||
font-size: $font-size;
|
||||
padding: 0 17px;
|
||||
margin-right: 5px;
|
||||
|
|
@ -220,16 +223,24 @@ $control-bar-height: 34px;
|
|||
|
||||
.vjs-playback-rate {
|
||||
font-size: 10px;
|
||||
margin-right: 50px;
|
||||
width: 37px !important;
|
||||
|
||||
.vjs-playback-rate-value {
|
||||
font-size: 13px;
|
||||
line-height: $control-bar-height;
|
||||
}
|
||||
|
||||
.vjs-menu .vjs-menu-content {
|
||||
width: 37px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-mute-control {
|
||||
outline: 0;
|
||||
@include disable-outline;
|
||||
|
||||
line-height: $control-bar-height;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
|
||||
.vjs-icon-placeholder {
|
||||
display: inline-block;
|
||||
|
|
@ -250,12 +261,9 @@ $control-bar-height: 34px;
|
|||
}
|
||||
}
|
||||
|
||||
.vjs-volume-menu-button,
|
||||
.vjs-volume-panel {
|
||||
width: 6em;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 65px;
|
||||
.vjs-volume-control {
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vjs-volume-bar {
|
||||
|
|
@ -313,8 +321,9 @@ $control-bar-height: 34px;
|
|||
}
|
||||
|
||||
.vjs-fullscreen-control {
|
||||
@include disable-outline;
|
||||
|
||||
width: 37px;
|
||||
outline: 0;
|
||||
|
||||
.vjs-icon-placeholder {
|
||||
display: inline-block;
|
||||
|
|
@ -339,7 +348,7 @@ $control-bar-height: 34px;
|
|||
line-height: $control-bar-height;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
|
@ -348,16 +357,16 @@ $control-bar-height: 34px;
|
|||
}
|
||||
|
||||
.vjs-resolution-button {
|
||||
outline: 0 !important;
|
||||
@include disable-outline;
|
||||
}
|
||||
|
||||
.vjs-menu {
|
||||
top: 20px;
|
||||
left: 0;
|
||||
|
||||
.vjs-menu-content {
|
||||
width: 50px;
|
||||
left: 50%; /* Center the menu, in it's parent */
|
||||
margin-left: -21px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
|
|||
|
|
@ -26,25 +26,21 @@ html, body {
|
|||
}
|
||||
|
||||
.vjs-peertube-link {
|
||||
@include disable-outline;
|
||||
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: $font-size;
|
||||
line-height: $control-bar-height;
|
||||
transition: all .4s;
|
||||
font-weight: $font-semibold;
|
||||
margin-right: 3px;
|
||||
padding: 0 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.vjs-peertube-link:hover {
|
||||
text-shadow: 0 0 1em #fff;
|
||||
}
|
||||
|
||||
// Fix volume panel because we added a new component (PeerTube link)
|
||||
.vjs-volume-panel {
|
||||
margin-right: 137px !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 350px) {
|
||||
.vjs-play-control {
|
||||
padding: 0 5px !important;
|
||||
|
|
@ -57,7 +53,6 @@ html, body {
|
|||
|
||||
.vjs-volume-panel {
|
||||
width: 26px !important;
|
||||
margin-right: 140px !important;
|
||||
}
|
||||
|
||||
.vjs-peertube-link {
|
||||
|
|
|
|||
|
|
@ -31,13 +31,34 @@ loadVideoInfo(videoId)
|
|||
peertube: {
|
||||
videoFiles: videoInfo.files,
|
||||
playerElement: videoElement,
|
||||
peerTubeLink: true,
|
||||
videoViewUrl: getVideoUrl(videoId) + '/views',
|
||||
videoDuration: videoInfo.duration
|
||||
},
|
||||
hotkeys: {
|
||||
enableVolumeScroll: false
|
||||
}
|
||||
},
|
||||
controlBar: {
|
||||
children: [
|
||||
'playToggle',
|
||||
'currentTimeDisplay',
|
||||
'timeDivider',
|
||||
'durationDisplay',
|
||||
'liveDisplay',
|
||||
|
||||
'flexibleWidthSpacer',
|
||||
'progressControl',
|
||||
|
||||
'webTorrentButton',
|
||||
|
||||
'muteToggle',
|
||||
'volumeControl',
|
||||
|
||||
'resolutionMenuButton',
|
||||
'peerTubeLinkButton',
|
||||
|
||||
'fullscreenToggle'
|
||||
]
|
||||
}
|
||||
}
|
||||
videojs('video-container', videojsOptions, function () {
|
||||
|
|
|
|||
Loading…
Reference in New Issue