Escaping while on embed glitches

[GrahamSH-LLK]

If you open the embed page for any project, and click escape on your keyboard, it gets messed up.

Steps to Reproduce

Open any project's embed page (scratch.mit.edu/{projectid}/embed) and click escape on your keyboard. See that it gets small, and is glitched out. This probably roots back to how the embed page was created from the typical fullscreen page.

Operating System and Browser

ChromeOS

[BryceLTaylor]

I've reproduced this on Mac Chrome, Firefox, and Safari.

[tutacat]

Occurs also in an iframe (i.e. data:text/html,<iframe width="560" height="480" src="https://scratch.mit.edu/projects/{projectid}/embed"/> for a simple test)

[Explosion-Scratch]

Intresting. Also a more professional embed page would be nice, less original white space and an automatically starting project.

[apple502j]

@Explosion-Scratch Auto-starting does not work well on some browsers (particularly Chrome - sounds won't play without user interaction)

[Explosion-Scratch]

Oh, that's wierd but okay.

On Wednesday, June 17, 2020, apple502j notifications@github.com wrote:

@Explosion-Scratch Auto-starting does not work well on some browsers (particularly Chrome - sounds won't play without user interaction)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.< https://ci4.googleusercontent.com/proxy/dYXfD8vIto9nt88ad3hMb8F060lKeXARmbK6xOK4CHPErKNQaJEFyitDgovkwvDJnQRmInTHOcp_CmvthPj9AMZORvuuWQd5f4bI_GjR0cwgLkwPRnpByLESRuAlbacCTjjsx3AWKHXqjePx9wFqI6fcah-7RFrCXqX6xrjcfV_SijZQatE7xHLhEML1Ays1BxMkWMs_TGxq0faPCcFZLJED2Cw8WZQPKcPr1hOa0g=s0-d-e1-ft#https://github.com/notifications/beacon/AOT2P3QQVUHKMRUOX4JXGT3RXDB5XA5CNFSM4N5RSJA2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEZ333UA.gif>

[BoomerScratch]

This is caused by https://github.com/LLK/scratch-gui/blob/3f4424ee5feca0dc81d94d14bd26fc838817bd1d/src/containers/stage-header.jsx#L28-L30, I guess this can be fixed by replacing it with

        if (event.key === 'Escape' && this.props.isFullScreen && !this.props.showBranding) {
            this.props.onSetStageUnFull(false);
        }

[benjiwheeler]

@BoomerScratch Thanks for the proposal -- I marked this help wanted, feel free to submit a fix!

[BoomerScratch]

@benjiwheeler great!

[GrahamSH-LLK]

Oh, so this is a Gui problem? @benjiwheeler, can you transfer this?

[BoomerScratch]

@GrahamSH-LLK Yes, it's a GUI problem because the embed is a part of it. But we can keep it in this repository.