Some scripts aren't triggered by their resolved promises after switching between pages or tabs

[ahmedrangel]

🐛 The bug

1. Go to https://scripts-phi.vercel.app/third-parties/youtube/nuxt-scripts
2. DO NOT click the video
3. Click "Nuxt Scripts"
4. Click "YouTube" in Third Party Components
5. Try to play the video
6. See that the script won't load the video

This also happens with other scripts like Vimeo, Google Maps, Intercom.

🛠️ To reproduce

https://scripts-phi.vercel.app/third-parties/youtube/nuxt-scripts

🌈 Expected behavior

The script should be loaded after triggered but for some reason, it doesn't.

ℹ️ Additional context

This may be a temporary solution but I propose to set the trigger option as 'manual' and then load it with load() when the trigger promise is resolved.

For example in ScriptYouTubePlayer.vue

//
const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
const { onLoaded, status, load } = useScriptYouTubePlayer({
  scriptOptions: {
    trigger: 'manual', // <- Load the script manually
  },
})

const player: Ref<YT.Player | undefined> = ref()
let clickTriggered = false
if (props.trigger === 'mousedown') {
  trigger.then(() => {
    load() // <- Call load when trigger resolves
    clickTriggered = true
  })
}

onMounted(() => {
  onLoaded(async (instance) => {
   // ...
  }
})
//

[cwaring]

related: #212

[harlan-zw]

Thanks for the issue and reproduction details.

This will be fixed in 0.7.2 which will be released shortly.

[cwaring]

Thanks @harlan-zw, I've just tested the patch and it works perfectly!