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

23/08/2023
Free
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

Current playlist

#59 Hotwire Turbo Streams CRUD #60 Hotwire Turbo Streams Autocomplete Search #63 Hotwire Modals (the right way)
+28
Just enough Hotwire for Rails developers
#1

#59 Hotwire Turbo Streams CRUD

40:56
#2

#60 Hotwire Turbo Streams Autocomplete Search

27:28
#3

#63 Hotwire Modals (the right way)

21:15
#4

#65 Hotwire SPA: Flash Messages

27:34
#5

#66 StimulusJS: Targets, Values, Classes. Build a PRO dropdown

34:30
#6

#67 Streams: Infinite Scroll Pagination

18:06
#7

#68 Frames: Infinite Scroll Pagination

17:47
#8

#69 Frames + Streams: Infinite Scroll Pagination (Best approach)

08:40
#9

#70: Hotwire: Live form validations and previews

18:46
#10

#73 Hovercards with Hotwire Turbo Frames

14:03
#11

#75 ActsAsVotable: likes, bookmarks, hotwire, vote scopes, cached votes

52:20
#12

#80 Dynamic Forms with Turbo (not JS approach)

18:23
#13

#81 StimulusJS: Conditionally display form fields based on selected value

08:21
#14

#82 Chained Select Fields in a form. Gem City-State

22:56
#15

#84 Cookies Consent Banner

10:10
#16

#98 Inline editing attributes with Hotwire

14:38
#17

#99 Hotwire: Search and Infinite Pagination (Ransack with Pagy)

17:26
#18

#100 Browser tab title notifications

16:43
#19

#110 Realtime Online User Tracking with Actioncable, Kredis, Turbo Broadcasts

24:13
#20

#113 Kredis Live counter, HTTP vs Websocket Turbo Broadcasts

13:59
#21

#119 Trello Clone. Advanced Kanban Drag and Drop Sortable Lists with Hotwire

42:19
#22

#121 Turbo Broadcasts CRUD Demystified

24:20
#23

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

06:30
#24

#144 Why I am replacing Turbo Frames with Streams for ActsAsVotable?

09:17
#25

#148 DataTables without page refresh using Hotwire Turbo Frames

10:59
#26

#151 Advanced Hotwire modals

21:29
#27

#152 Custom Turbo Streams. How to redirect from a form that is inside a turbo frame?

20:37
#28

#153 Refactoring Hotwire Modals

10:03
#29

#156 Turbo 8 Morphing in real life

32:58
#30

#163 Instant page loads with Turbo 8 prefetch (aka InstantClick)

06:01
#31

#181 Search and Autocomplete French Company Information

00:00