#143 Turbo Permanent: persist Audio Video and Search results while navigating pages

23/08/2023
hotwire turbo

Often when you visiting media websites, you will want an audio or video player to keep playing even after navigating to another page (like Spotify).

data-turbo-permanent is a Turbo Drive feature that makes it very easy to persist (not refresh) elements when navigating to other pages in an app.

On Superails I use data-turbo-permanent to persist latest search results when navigating around pages.

In this episode we will keep audio and video playing across page navigation.

As a bonus, we will look at opening video picture-in-picture when navigating to another page!

Episode source code: https://github.com/corsego/143-data-turbo-permanent/commit/3a62b6a809d8cdec636f54b1a7da43a005216cd9
Based on this blogpost: https://blog.corsego.com/turbo-play-audio-across-pages

0:00 Examples of using data-turbo-permanent
2:13 Use data-turbo-permanent
3:24 permanent audio player while navigating around app
4:05 permanent video player
4:30 trigger picture-in-picture video player when navigating around the app

1
Sign in to join the conversation