add shortcut for fullscreen in live view

[stavros-k]

Hello, this PR adds keyboard shortcut f for full screen toggling in LiveView, and a fullscreen query param.
I can now with this set my kiosk headless raspberry to start with ${URL}/?group=my_group&fullscreen=true

I know that changes made here might not align with your codebase standards, which I give you permission to take this PR over and modify it accordingly.

Thanks for the great software!

[netlify]

✅ Deploy Preview for frigate-docs canceled.

Name	Link
🔨 Latest commit	fe991c1
🔍 Latest deploy log	https://app.netlify.com/sites/frigate-docs/deploys/66b791f12ad0ce00084cacc6

[NickM-27]

Suggested change

	const desiredState = value === "true";
	if (fullscreen === desiredState) {
	return;
	}
	toggleFullscreen;
	if (!fullscreen) {
	toggleFullscreen();
	}

[NickM-27]

not showing in full screen in the default state so I think it is safe to assume that if the query arg is provided the user wants fullscreen

also, toggleFullscreen needs to be called not just passed.

[stavros-k]

Should we check that the value === "true"? Assuming someone can programmatically open the URL with it being either true or false?
so in case of fullscreen=false we just ignore it

[hawkeye217]

Thanks for your contribution!

The Fullscreen API requires that the request to enter fullscreen mode must be initiated by a user gesture (a click, tap, or keypress). This is a security measure so that malicious websites can't unexpectedly take over a user's entire screen without their consent.

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

So I think the code to initiate fullscreen from a url argument should be removed from this PR.

To confirm, I tested it on a Mac with Firefox, Safari, and Chrome, and each of them failed to go fullscreen with the url argument, each of them presenting a console error similar to:

use-fullscreen.ts:36 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

Perhaps the browser you're using doesn't have a strict check, and if so, your browser is likely an exception. This isn't something we'd be able to support for the general user.

But let's definitely move forward with the keypress. That's a great addition.

[hawkeye217]

Remove url arg code per my earlier comment

[stavros-k]

Thanks for your contribution!

The Fullscreen API requires that the request to enter fullscreen mode must be initiated by a user gesture (a click, tap, or keypress). This is a security measure so that malicious websites can't unexpectedly take over a user's entire screen without their consent.

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

So I think the code to initiate fullscreen from a url argument should be removed from this PR.

To confirm, I tested it on a Mac with Firefox, Safari, and Chrome, and each of them failed to go fullscreen with the url argument, each of them presenting a console error similar to:

use-fullscreen.ts:36 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

Perhaps the browser you're using doesn't have a strict check, and if so, your browser is likely an exception. This isn't something we'd be able to support for the general user.

But let's definitely move forward with the keypress. That's a great addition.

Hmm I remember such a restriction now, and I was amazed when it worked initially. I do use it in kiosk mode, so it might have something like to do with it. But at least now I can script a key press to automatically move it to full screen. Thanks!

[hawkeye217]

@stavros-k FYI, we had to revert your changes in this PR. Users couldn't create or edit camera groups with "f" in the name.

[immkg]

@stavros-k FYI, we had to revert your changes in this PR. Users couldn't create or edit camera groups with "f" in the name.

You can update use-keyboard-listener.ts with following conditions:

e.target.tagName !== "INPUT" unless modifier is set at ctrl: e.ctrlKey || e.metaKey

This would allow user to type in input fields without shortcuts effecting them. Also it would allow users to make use of shortcuts with modifiers.

[stavros-k]

@stavros-k FYI, we had to revert your changes in this PR. Users couldn't create or edit camera groups with "f" in the name.

You can update use-keyboard-listener.ts with following conditions:

e.target.tagName !== "INPUT" unless modifier is set at ctrl: e.ctrlKey || e.metaKey

This would allow user to type in input fields without shortcuts effecting them. Also it would allow users to make use of shortcuts with modifiers.

I would appreciate if you could do that change. I don't have the time currently to look into that.
Thanks!