Hi created an issue a couple months ago with this title, and linked here: #24
@JackPu replied and asked for more code the closed the issue. I replied with more code and never heard back, and the issue wasn't reactivated and lots of time has passed. Somebody else even chimed in and said they could reproduce. Because this is a real issue, and I would like to use this component, I am creating a new issue to raise awareness.
Note that version 0.18 and 0.19 made the problem much worse, and instead of getting just console errors now the entire player is crippled.
===== Comment from May 6 ====
Here I made a quick simplified app which demonstrates the problem. In this app, click Show, and everything is great in the console. Click Hide. Click Show again and the video plays but vue-core-video-player is spewing tons of stuff in the console. Before it was just the 'open' error. I have the video player in a modal dialog which is popped open based on what was clicked, so the video player is a sub-component of a large hierarchy. Here is the app:
<template>
<div id="app">
<button @click="show = !show">{{show ? 'Hide' : 'Show'}}</button>
<vue-core-video-player :src="videoSource" :loop="false" v-if="show"></vue-core-video-player>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
show: false,
videoSource: 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4'
};
}
};
</script>====== End Comment ====
====== Comment from May 5 =====
The full error is:
Uncaught TypeError: Cannot read property 'open' of undefined
at Object.<anonymous> (vue-core-video-player.common.js:7320)
at Object.emit (vue-core-video-player.common.js:4156)
at VueComponent.emit (vue-core-video-player.common.js:6511)
at BaseVideoCore.emit (vue-core-video-player.common.js:6372)
at vue-core-video-player.common.js:5954
FYI the current state of my view at the time is:
currentPanel = true
panelShow = false
speedListPanel = false
resolutionListPanel = false
resolution = '720p'
medias = ['string-to-my-mp4']
$container.classList = ['vcp-container', 'flex-grow-1']
After debugging I believe this is just a race condition or something in settings.vue:
https://github.com/core-player/vue-core-video-player/blob/master/src/dashboard/settings.vue
mounted () {
this.on(EVENTS.SOURCE_UPDATED, () => {
this.medias = this.$player.medias
this.resolution = this.$player.resolution
const { autoplay, loop } = this.$player.config
if (autoplay) {
this.$refs['autoplaySwitch'].open() // <-------- Error happens here
}
if (loop) {
this.$refs['loopSwitch'].open()
}
})
document.addEventListener('click', () => {
if (this.panelShow) {
this.panelShow = false
this.speedListPanel = false
this.resolutionListPanel = false
this.$container.classList.remove('settings-open')
}
})
}If I turn off autoplay the error goes away.
Maybe it is also possible the object hasn't been constructed yet because perhaps of the v-show='panelShow' in the template?
Also I am concerned about the document.addEventListener in this code snippet. It is added during mounting, but never removed during unmounting. This means event listeners are being leaked in my application.
Thanks again for the great video player.
===== End Comment ====
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent