Error when updating reactive video id

[AnnikenYT]

Hi, ive already posted a comment on the "old" repo, but seeing that it had little to no activity over the last 2 years ill ask here again :)
Essentially, I have this simple template:

<template>
  <vue-plyr id='player' :key="vid">
    <div data-plyr-provider="youtube" :data-plyr-embed-id="vid" />
  </vue-plyr>
</template>
<script setup lang='ts'>

const props = defineProps<{
  vid: string;
}>();

Now, vid changes, and the entire app pretty much breaks.
I get this error in console:

Uncaught (in promise) TypeError: can't access property "insertBefore", parent is null

I've isolated the issue to this component.
Any help is appreciated :)

[skjnldsv]

Hey!
Could you post the full stacktrace? :)

[AnnikenYT]

Sure! Sorry, didnt look at this issue for a while 😅
Here, this is the full stacktrace, doubt its of much use tho...

Uncaught (in promise) TypeError: can't access property "insertBefore", parent is null
    insert runtime-dom.esm-bundler.js:10
    mountElement runtime-core.esm-bundler.js:5195
    processElement runtime-core.esm-bundler.js:5115
    patch runtime-core.esm-bundler.js:5035
    patchBlockChildren runtime-core.esm-bundler.js:5355
    patchElement runtime-core.esm-bundler.js:5263
    processElement runtime-core.esm-bundler.js:5118
    patch runtime-core.esm-bundler.js:5035
    componentUpdateFn runtime-core.esm-bundler.js:5660
    run reactivity.esm-bundler.js:185
    update runtime-core.esm-bundler.js:5694
    updateComponent runtime-core.esm-bundler.js:5519
    processComponent runtime-core.esm-bundler.js:5452
    patch runtime-core.esm-bundler.js:5038
    componentUpdateFn runtime-core.esm-bundler.js:5660
    run reactivity.esm-bundler.js:185
    update runtime-core.esm-bundler.js:5694
    callWithErrorHandling runtime-core.esm-bundler.js:155
    flushJobs runtime-core.esm-bundler.js:396
    promise callback*queueFlush runtime-core.esm-bundler.js:285
    queueJob runtime-core.esm-bundler.js:279
    effect runtime-core.esm-bundler.js:5692
    triggerEffect reactivity.esm-bundler.js:394
    triggerEffects reactivity.esm-bundler.js:384
    triggerRefValue reactivity.esm-bundler.js:1000
    effect reactivity.esm-bundler.js:1131
    triggerEffect reactivity.esm-bundler.js:394
    triggerEffects reactivity.esm-bundler.js:379
    triggerRefValue reactivity.esm-bundler.js:1000
    effect reactivity.esm-bundler.js:1131
    triggerEffect reactivity.esm-bundler.js:394
    triggerEffects reactivity.esm-bundler.js:379
    triggerRefValue reactivity.esm-bundler.js:1000
    set value reactivity.esm-bundler.js:1044
    finalizeNavigation vue-router.mjs:3307
    pushWithRedirect vue-router.mjs:3180
    promise callback*pushWithRedirect vue-router.mjs:3151
    push vue-router.mjs:3078
    0 PlaylistEntry.vue:5
    callWithErrorHandling runtime-core.esm-bundler.js:155
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
    invoker runtime-dom.esm-bundler.js:369

[skjnldsv]

Hum, weird indeed.
Can you make sure to upgrade your vue version to latest?

Do you have some live example so I can reproduce it myself easily?

[AnnikenYT]

Just updated vue, doesn't change anything. Here is a minimal reproduction of the issue:

[AnnikenYT]

any updates on this?

[skjnldsv]

Hey, sorry, Just had a look! Nice video btw 😂🙈

I think this might be a vuejs issue vuejs/core#5657

[AnnikenYT]

Ah, I see. Ok, Is there any other way to reactively update the video? Everything else I saw so far didn't really work...

[skjnldsv]

Maybe sampotts/plyr#448 ?

[AnnikenYT]

Gonna try that, thanks

[andisulistyonugroho]

Hi, I didn't use reactivity to change the video, but using source setter in plyr example https://github.com/sampotts/plyr?tab=readme-ov-file#the-source-setter.
In my case I also need to start the video immediately after it changes, so I call play method inside on ready events https://github.com/sampotts/plyr#events. Here is my example, hope it helps

<script setup>
onMounted(() => {
  plyr.value.player.on('ready', (e) => {
    plyr.value.player.play()
  })
})

const changeVideo = (videoId: string) => {
  plyr.value.player.source = {
    type: 'video',
    sources: [
      {
        src: videoId,
        provider: 'youtube',
      },
    ],
  }
}
</script>

<template>
  <vue-plyr ref="plyr">
    <div data-plyr-provider="youtube" data-plyr-embed-id="tPEE9ZwTmy0" />
  </vue-plyr>
  <button @click="changeVideo('dCxSsr5xuL8')" />
</template>