#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
Join the conversation
Sign in to access PRO lessons, access private repos, leave comments, create watch lists.
We collect your email address, name and username to create your account. We do not share your email address with anyone else.