 I'm frustrated because I don't really know what's the best way to implement a pop-out media player for when you scroll away from a post that's playing and I'm worried that the approach I chose is the wrong one 😦 Kinda have to create a new media element that's not part of the status component because you don't want to lose it if the status gets unmounted, but starting playback from a new element isn't gapless. No comments
 Can't you just create a media player that isn't part of any status? You don't need more than one of them playing at the same time anyway, so it makes sense to have it as a singleton, with the DOM element tucked away wherever doesn't change. I did it that way in an Android app, except there it was a service that ran in the background independent of the UI state. @Gargron Sorry - I am confused on this post. It seems there is a gap between live viewing a post and scrolling. From an end user perspective, if I scroll, it may indicate that the previously playing media isn't relevant to me any more. If I want to watch it, I won't scroll until it is finished. If that is what is being described, I don't think it is an issue that needs to be resolved (scrolling vs. playing media). @Gargron you could create an off screen media element and proxy to another media element or canvas that you then mount and use to proxy events, kind of like how bbc/VideoContext does it @Gargron for now users can PiP in Chrome A new way to PIP Just head over to flip the flag to ‘enabled’, click that blue restart button and the next time you pull up a video that supports PIP (YouTube is the obvious choice, but many services use it), you can now look in your notifications tray for a new PIP button works with Mastodon embedded vids @Gargron in HTML you can just reappend same media element where you want and it will preserve it's state. Not sure if this is possible in React. And this does not work with iframes. I guess for React you can play media in a portal and when status is visible, position: absolute it to status frame, and when status is not visible, change it to fixed element. Another approach could be to manually restore state when media gets pinned, but again, it's impossible for iframes, and is heavy operation. |
Gregory's Server
@Gargron You can try moving the existing (playing) element instead of creating a new one - not sure how the DOM reconciliation algorithm would react to that though.