Picture-in-Picture modal?

Hi everyone, I’m new to Ember, and I’ve got what seems like a challenging problem that I’m not sure how to solve.

My app is basically a list of videos, that when you click on, they open up a modal with the embedded video player and start playing. Pretty basic. However, I want to be able to ‘minimise’ this modal, and basically have the video player shrink down to the corner of the screen and allow the user to go back and interact with the previous route.

Facebook have just launched something similar. Unlike their implementation though I would need the video player to continue playing across all routes/states, so you can interact with the whole app while watching a video.

Is this possible? I’ve searched everywhere but couldn’t find anyone that had solved this already.

Thanks for your help!

This sounds a little tricky. My best guess would be to have an application structure such that the modal is attached to the topmost view. With some clever CSS and JavaScript, you should be able to make the modal float at the press of a button so that the user can continue navigating other parts of the application.

Your application.hbs should be roughly something like

<modal></modal>
{{outlet}}

so that the modal always exists alongside all of the other application views/routes.

If you have a button in one template that needs to talk to the application controller/route/component, apparently it’s possible to do this based on this post assuming that I am understanding everything correctly.

Yes, just put a named outlet inside of your application template and render to it. It will stick around while traversing your app since the application view is never torn down (in normal circumstances).

How do you render to an outlet programmatically?

Gives a nice a simple description of that.

1 Like

How would I tie this in with the routing though? So the modal’s “open state” has its own URL - as you enter that route the modal is full-screen and when you exit the modal is minimised?

You could follow the following pattern:

  1. Create a video modal component that you place on your top-most route, this video modal should be able to switch between full screen and minimized view

  2. Create a video modal service, that offers the following pseudo-methods: playVideo(url), maximizeModal(), minimizeModal(), closeModal(), openModal() and interact with your modal component

  3. In your modal route, on didTransition, just pass the url of the video to the service, and call the maximizeModal() method

  4. In your modal route, on willTransition, just call the minimizeModal()