Feat / Movie screen by composition

[langemike]

With this change, we utilized composition to visually arrange the MediaMovie screen. We separated the inlineLayout variant from the regular variant. We call it MediaMovieCinema and MediaMovieInline.

We moved away from using VideoLayout as we see this as the best path forward. The VideoLayout contains too many conditionals, which make it difficult to oversee what visual output can be expected.

The goal is to compose the screen from the top-level (= the screen itself), which makes it immediately clear what visual output can be expected without the need to dive deeper into components and follow the deeply nested conditions. Also, breaking everything down into components simplifies the process of creating different versions of the same screen.

We have put the variables we need for rendering the screen in useMovieData / useMovieParams / useMovieHandlers. This keeps the code DRY across different versions of the same screen. useMovieData is placed in hooks-react, so it can be re-used across different platforms.

The visual output of the screen should be identical to how it was.

This PR also contains a small change which applies translations for the "Recommended playlist" in the UI.

Original PR: https://github.com/Videodock/vd-ott-apps/pull/445

[github-actions]

Visit the preview URL for this PR (updated for commit 686035c):

https://ottwebapp--pr674-feat-movie-compositi-2oyyjpx4.web.app

_{(expires Thu, 10 Apr 2025 13:04:12 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c198f8a3a199ba8747819f7f1e45cf602b777529}

[ChristiaanScheermeijer]

🎉 I already reviewed this PR in our private repo

[royschut]

🤩