cobalt: Add dual Picture-in-Picture demo

[GillianZili]

Add a demonstration of simultaneous video playback using both texture-
and overlay-based decoders. This demo showcases Cobalt's ability to
manage multiple media streams and transitions between side-by-side
layouts and native Picture-in-Picture modes.

The application provides a reference for handling mixed rendering paths
and ensuring compositor stability during layout changes. This helps
validate multi-video support and rendering behavior when switching
between display modes.

Issue: 445194225

[github-actions]

🤖 Gemini Suggested Commit Message

---

cobalt: Add dual Picture-in-Picture demo

Add a demonstration of simultaneous video playback using both texture-
and overlay-based decoders. This demo showcases Cobalt's ability to
manage multiple media streams and transitions between side-by-side
layouts and native Picture-in-Picture modes.

The application provides a reference for handling mixed rendering paths
and ensuring compositor stability during layout changes. This helps
validate multi-video support and rendering behavior when switching
between display modes.

Bug: 11526

---

💡 Pro Tips for a Better Commit Message:

1. Influence the Result: Want to change the output? You can write custom prompts or instructions directly in the Pull Request description. The model uses that text to generate the message.
2. Re-run the Generator: Post a comment with: /generate-commit-message

[GillianZili]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces a dual Picture-in-Picture (PiP) demo for Cobalt, consisting of an HTML file and a JavaScript file that manage side-by-side and PiP/fullscreen video transitions. The review feedback is highly constructive and focuses on improving robustness and compatibility for TV environments. Key recommendations include restricting the keydown event listener to specific keys (like 'Enter' or 'Space') to prevent breaking device navigation, merging duplicate CSS declarations for .video-container, refactoring the async Promise executor anti-pattern in bootstrapVideo, and adding safety checks for network responses and the availability of the Picture-in-Picture API.

[gemini-code-assist]

Code Review

This pull request introduces a dual Picture-in-Picture (PiP) demo for Cobalt, featuring an HTML layout and a JavaScript controller that manages a texture-mode video and an overlay-mode video. The review feedback highlights a few key issues in the JavaScript implementation: an error-handling bug where a failed PiP request still triggers a fullscreen transition, an inline style override on the second video that prevents it from correctly sizing to 100% in fullscreen, and an unused currentStage variable that should be removed.

[borongc]

Consider to replace with another video that is more vivid. This one has a static white screen, making PiP window less vivid.