Vue teleportation breaks playback

[suterma]

In my app, I would like to teleport the playing video to a "widget" area at times, using Vue's built in Teleport component.

Here is some example code:

<Teleport to="#teleportation-target" :disabled="!doTeleport">
  <!-- This container will be moved -->
  <div class="youtube-container">
    <!-- The following div will be replaced by the IFrame player -->
    <div
      ref="youtubePlayerElement"
    >
      YouTube Player comes here...
    </div>
  </div>
</Teleport>

One caveat is playback when actually teleporting. The created player is reset on teleportation. To see the effect, start the video, then toggle teleportation. The playback is not continuous, but gets interrupted by a reset/recreated player.

The full example from above: https://stackblitz.com/edit/vue-youtube-teleportation?file=index.html
NOTE: To actually load the video, you need to use the "Open in New Tab" button.

Observations:

• Moving the container works, and re-attaches the container at the new location in the DOM
• The video player is moved along with the container
• However, the player fires the "onReady" event after teleportation, which is a sign that the DOM move gets interpreted as some kind of "mount" maybe.

The optimal solution would be to have just continuous playback all the time, regardless of the teleportation. Maybe this is also more of Vue or teleportation issue. Maybe there something like a "silent" teleportation" that does not trigger some event down to child components?

[suterma]

The VueJs documentation for the Teleport component explicitly mentions moving videos from and to the teleportation target: https://github.com/vuejs/rfcs/blob/2c62d12d0b8dc53018ed6ab6fbc5aea336d8eea6/active-rfcs/0025-teleport.md#disabled
I can confirm that this works with videos using the HTML video element, not interrupting playback at all. This suggests that the teleportation triggers some handled event either in vue-youtube or the underlying IFrame player.

[suterma]

After some experimenting with keep-alive and other vue-related stuff, I am coming to the conclusion that this is inherent to the IFrame player itself. However, I did not find a way to prevent the IFrame player to pick up the teleportation.

This behaviour seems to be known: https://stackoverflow.com/a/15757469/79485

A possible workaround, as of the link above, might be to capture any further onReady event, and then handling these with a initialisation of the "new" player with the state the "old" player was in (position, volume etc..).

I will try to play with the above stackblitz example in this direction.

[Techassi]

Okay this is a completely new use-case. I never tested teleportation in Vue using this library. I will take a look at it, but I really can't say if this is fixable or not.

Also let me know, if you made any progress yourself.

[suterma]

I now ended up living with it for the time being, with the only resolution to actually also recreate my playback wrapper when teleportation occurs.

This ensures for me, that all my handling code also gets recreated and attaches properly to the (new) vue-youtube instance. It currently does not recreate state like playback and exact position. It's good enough for me.

Here's my real live code for this: https://github.com/suterma/replayer-pwa/blob/72fbdfbf20454e035dfa3621728c568aea0f74e6/src/components/track/MediaTrack.vue#L665

I will currently leave it at this. Feel free to close.

[Techassi]

We might be able to store the state (have to figure out what needs to be included) in the manager. We could then maybe provide some helper methods to restore the state after teleportation finished.