How to detect slide visibility from a component?

[maoosi]

I have created a simple Video component and I want to automatically play/stop the video depending on slide visibility.

Using the code below, I was able to make it work. Though this is not clean (as relying on a class name attribute that can theoretically change anytime), so I was wondering if there was a better way to detect slide visibility from inside a custom component?

import { ref, watchEffect, getCurrentInstance } from 'vue'
import { useMediaControls } from '@vueuse/core'

const vm = getCurrentInstance()
const video = ref()
const { playing, currentTime } = useMediaControls(video)

watchEffect(() => {
    const componentRouteName = vm.parent.attrs.class.replace('slidev-', '')
    const currentRouteName = vm.ctx.$slidev.nav.route.name
    
    if (componentRouteName === currentRouteName) {
        console.log('Slide is visible, playing video.')
        currentTime.value = 0
        playing.value = true
    } else {
        console.log('Slide is invisible, stopping video.')
        playing.value = false
    }
})