Theater mode for stream page

[MemoryLeakDeath]

Description

Viewers have requested the ability to expand the viewable area of streams to minimize the extraneous information on the stream page and focus on the streaming video and chat.

Features

• Added a "Theater Mode" button below the stream next to the debug icon:
• Theater Mode can also be toggled on/off via a the keyboard shortcut: ALT-T
• When activated, "Theater Mode" will hide the header/footer of the stream, hide the header/footer of the site, and hide the profile section/chat rules section so the stream and chat can take up all the real estate. The stream is made slightly larger (col-9 -> col-10) and the chat is made slightly smaller (col-3 -> col-2).
• When the viewer hovers over the video column, the stream header/footer containing the stream title/buttons and the streamer name/language/pronouns and the new theater mode button, debug button, and report user buttons will animate into position above the video on top and bottom respectively.
• All the UI buttons, including the video buttons, and chat should continue to work correctly in theater mode.

Limitations

• Smaller screens, such as those on mobile devices, will not see any benefit to this feature and probably should not use it.

Development notes

• Most of this feature is achieved via CSS with a small javascript hook called TheaterMode to handle button click, keyboard input, and the toggling of the CSS class on the body element.

Community Contributors

Thank you to the following community contributors who helped with CSS and other style inputs:

• Cykotiq
• MrTeeXD1

[Cykotiq]

• by overlaying the footer area over the video, you cover up the volume and other player controls. that is the main reason I did not include it in my design
• it feels like it needs left/right padding added to the header/footer
• I feel like having just 5px around the outer edges of the window and between the video/chat (as I had it in my design) looks cleaner and is more is line with the normal site layout, with padding around each of the section
• Ideally the theatre mode button should be part of the player controls. I know that would require us creating a whole set of custom video controls, but I feel like it would allow for further expansion in the future (eg. chromecast, quality settings, debug button could be migrated over, webRTC/HLS setting, subtitles, etc)

[MemoryLeakDeath]

• by overlaying the footer area over the video, you cover up the volume and other player controls. that is the main reason I did not include it in my design
• it feels like it needs left/right padding added to the header/footer
• I feel like having just 5px around the outer edges of the window and between the video/chat (as I had it in my design) looks cleaner and is more is line with the normal site layout, with padding around each of the section
• Ideally the theatre mode button should be part of the player controls. I know that would require us creating a whole set of custom video controls, but I feel like it would allow for further expansion in the future (eg. chromecast, quality settings, debug button could be migrated over, webRTC/HLS setting, subtitles, etc)

• I've tried to push the footer area up high enough that it shouldn't be covering the player controls, it is not easy to test locally though so hopefully everything continues to work OK.
• I will add additional padding around the elements.
• I'd rather wait on player controls until we no longer need the FTLPlayer.js file. That is difficult to read and seems to hook some of the player controls. I think it would be better to make a "clean break" from that when waveguide is ready and have a more straightforward player controls and look-and-feel update that brings us a step closer to an embeddable player.

[MemoryLeakDeath]

Added suggested padding around the elements.

[clone1018]

We'll evaluate this for inclusion as part of the beta release.