web: Convert demo to typescript and copy the new extension-player styling over

[Dinnerbone]

The demo now has the improvements from #13473, and uses the actual API through typescript

[danielhjacobs]

In https://github.com/ruffle-rs/ruffle/blob/master/web/packages/extension/src/player.ts#L25, this was renamed playerContainer. That name is probably better since that matches the id.

[Dinnerbone]

Good call. I renamed it back just to help work with the diff, but I've renamed it again now

[danielhjacobs]

Any reason to use the prefix type cast operator instead of as (here and elsewhere)? The as operator is preferred according to https://www.typescriptlang.org/docs/handbook/release-notes/typescript-1-6.html#new-tsx-file-extension-and-as-operator

[Dinnerbone]

I'll fix it here and add a lint in a future PR to enforce as, as we use a lot of angle casting currently

[danielhjacobs]

This code is needed to make the "Select File" button work:

ruffle/web/packages/extension/src/player.ts

Lines 272 to 276 in cad1621

	document
	.getElementById("local-file-label")!
	.addEventListener("click", () => {
	document.getElementById("local-file")!.click();
	});

[danielhjacobs]

The location of the Ruffle logo is not ideal on small screens (note: this is this PR with the URL input parameter set to true to make the screen as crowded as possible).

[Dinnerbone]

Made it hide the logo when the screen is <=600px wide