Skip to content

Commit

Permalink
Use ES6 classes for video.js components instead of videojs.extend (#3060
Browse files Browse the repository at this point in the history
)
absidue authored Jan 14, 2023
1 parent 67b9a74 commit 3e80e96
Showing 1 changed file with 55 additions and 50 deletions.
105 changes: 55 additions & 50 deletions src/renderer/components/ft-video-player/ft-video-player.js
Original file line number Diff line number Diff line change
@@ -1196,27 +1196,28 @@ export default Vue.extend({
},

createLoopButton: function () {
const toggleVideoLoop = this.toggleVideoLoop

const VjsButton = videojs.getComponent('Button')
const loopButton = videojs.extend(VjsButton, {
constructor: function(player, options) {
VjsButton.call(this, player, options)
},
handleClick: () => {
this.toggleVideoLoop()
},
createControlTextEl: function (button) {
class loopButton extends VjsButton {
handleClick() {
toggleVideoLoop()
}

createControlTextEl(button) {
button.title = 'Toggle Loop'

const div = document.createElement('div')

div.id = 'loopButton'
div.className = 'vjs-icon-loop loop-white vjs-button loopWhite'
div.className = 'vjs-icon-loop loop-white vjs-button'

button.appendChild(div)

return div
}
})
}

videojs.registerComponent('loopButton', loopButton)
},

@@ -1247,15 +1248,15 @@ export default Vue.extend({
},

createFullWindowButton: function () {
const toggleFullWindow = this.toggleFullWindow

const VjsButton = videojs.getComponent('Button')
const fullWindowButton = videojs.extend(VjsButton, {
constructor: function(player, options) {
VjsButton.call(this, player, options)
},
handleClick: () => {
this.toggleFullWindow()
},
createControlTextEl: function (button) {
class fullWindowButton extends VjsButton {
handleClick() {
toggleFullWindow()
}

createControlTextEl (button) {
// Add class name to button to be able to target it with CSS selector
button.classList.add('vjs-button-fullwindow')
button.title = 'Full Window'
@@ -1268,7 +1269,8 @@ export default Vue.extend({

return div
}
})
}

videojs.registerComponent('fullWindowButton', fullWindowButton)
},

@@ -1279,15 +1281,15 @@ export default Vue.extend({

const theatreModeActive = this.$parent.useTheatreMode ? ' vjs-icon-theatre-active' : ''

const toggleTheatreMode = this.toggleTheatreMode

const VjsButton = videojs.getComponent('Button')
const toggleTheatreModeButton = videojs.extend(VjsButton, {
constructor: function(player, options) {
VjsButton.call(this, player, options)
},
handleClick: () => {
this.toggleTheatreMode()
},
createControlTextEl: function (button) {
class toggleTheatreModeButton extends VjsButton {
handleClick() {
toggleTheatreMode()
}

createControlTextEl(button) {
button.classList.add('vjs-button-theatre')
button.title = 'Toggle Theatre Mode'

@@ -1299,7 +1301,7 @@ export default Vue.extend({

return button
}
})
}

videojs.registerComponent('toggleTheatreModeButton', toggleTheatreModeButton)
},
@@ -1317,19 +1319,19 @@ export default Vue.extend({
this.$parent.toggleTheatreMode()
},

createScreenshotButton: function() {
createScreenshotButton: function () {
const takeScreenshot = this.takeScreenshot

const VjsButton = videojs.getComponent('Button')
const screenshotButton = videojs.extend(VjsButton, {
constructor: function(player, options) {
VjsButton.call(this, player, options)
},
handleClick: () => {
this.takeScreenshot()
class screenshotButton extends VjsButton {
handleClick() {
takeScreenshot()
const video = document.getElementsByTagName('video')[0]
video.focus()
video.blur()
},
createControlTextEl: function (button) {
}

createControlTextEl(button) {
button.classList.add('vjs-hidden')
button.title = 'Screenshot'

@@ -1341,7 +1343,7 @@ export default Vue.extend({

return div
}
})
}

videojs.registerComponent('screenshotButton', screenshotButton)
},
@@ -1484,17 +1486,19 @@ export default Vue.extend({
}, 200)
return
}
const adaptiveFormats = this.adaptiveFormats
const activeAdaptiveFormats = this.activeAdaptiveFormats
const setDashQualityLevel = this.setDashQualityLevel

const VjsButton = videojs.getComponent('Button')
const dashQualitySelector = videojs.extend(VjsButton, {
constructor: function(player, options) {
VjsButton.call(this, player, options)
},
handleClick: (event) => {
class dashQualitySelector extends VjsButton {
handleClick(event) {
const selectedQuality = event.target.innerText
const bitrate = selectedQuality === 'auto' ? 'auto' : parseInt(event.target.attributes.bitrate.value)
this.setDashQualityLevel(bitrate)
},
createControlTextEl: (button) => {
setDashQualityLevel(bitrate)
}

createControlTextEl(button) {
const beginningHtml = `<div class="vjs-quality-level-value">
<span id="vjs-current-quality">1080p</span>
</div>
@@ -1518,16 +1522,16 @@ export default Vue.extend({
let qualityLabel
let bitrate

if (typeof this.adaptiveFormats !== 'undefined' && this.adaptiveFormats.length > 0) {
const adaptiveFormat = this.adaptiveFormats.find((format) => {
if (typeof adaptiveFormats !== 'undefined' && adaptiveFormats.length > 0) {
const adaptiveFormat = adaptiveFormats.find((format) => {
return format.bitrate === quality.bitrate
})

if (typeof adaptiveFormat === 'undefined') {
return
}

this.activeAdaptiveFormats.push(adaptiveFormat)
activeAdaptiveFormats.push(adaptiveFormat)

fps = adaptiveFormat.fps ? adaptiveFormat.fps : 30
qualityLabel = adaptiveFormat.qualityLabel ? adaptiveFormat.qualityLabel : quality.height + 'p'
@@ -1563,7 +1567,8 @@ export default Vue.extend({

return button.children[0]
}
})
}

videojs.registerComponent('dashQualitySelector', dashQualitySelector)
this.player.controlBar.addChild('dashQualitySelector', {}, this.player.controlBar.children_.length - 1)
this.determineDefaultQualityDash()

0 comments on commit 3e80e96

Please sign in to comment.