Add "ChangeEpisodeButton" and hook as player control
This commit is contained in:
44
app/components/util/player-control.js
Normal file
44
app/components/util/player-control.js
Normal file
@ -0,0 +1,44 @@
|
||||
import { createApp, h } from 'vue'
|
||||
|
||||
export function createVueControlSmart(component, props = {}, events = {}) {
|
||||
let vueApp = null
|
||||
|
||||
return {
|
||||
name: props.name || 'vue-control',
|
||||
index: props.index || 0,
|
||||
position: props.position || 'left',
|
||||
html: `<div class="vue-control-wrapper" data-vue-control="${component.name}"></div>`,
|
||||
tooltip: props.tooltip || '',
|
||||
|
||||
mounted: function ($control) {
|
||||
const container = $control.querySelector('.vue-control-wrapper')
|
||||
|
||||
if (container && !vueApp) {
|
||||
|
||||
console.log("111")
|
||||
vueApp = createApp({
|
||||
render() {
|
||||
return h(component, {
|
||||
...props,
|
||||
...Object.entries(events).reduce((acc, [eventName, handler]) => {
|
||||
acc[`on${eventName.charAt(0).toUpperCase() + eventName.slice(1)}`] = handler
|
||||
return acc
|
||||
}, {})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
vueApp.mount(container)
|
||||
$control._vueApp = vueApp
|
||||
}
|
||||
},
|
||||
|
||||
destroy: function ($control) {
|
||||
if ($control._vueApp) {
|
||||
$control._vueApp.unmount()
|
||||
$control._vueApp = null
|
||||
vueApp = null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user