3

I'm using React and styled-components. I would like to hide the Navbar when user switch full screen mode by pressing F11 (Chrome).

I have tried following:

const NavbarContainer = styled.div`
  height: 30px;
  background-color: mediumseagreen;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  & :fullscreen {
    display: none;
  };
`

What else is needed to make it work? Currently the Navbar is still visible when I go fullscreen.

vpas
  • 513
  • 1
  • 5
  • 18

3 Answers3

2

We have two options to resolve the problem with fullscreen mode.

First solution:

In styled-components you will need to use the @media all and (display-mode: fullscreen) instead of the :fullscreen pseudo-class, because this pseudo-class works only with Fullscreen API. This will triggered with F11 key as an on/off switch, however we cann't use the Esc key to cancel the fullscreen mode.

const NavbarContainer = styled.div`
  height: 30px;
  background-color: mediumseagreen;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  @media all and (display-mode: fullscreen) {
    display: none;
  }
`;

Second solution:

We using Fullscreen API, when we will call this API after that the :fullscreen pseudo-class will works. This approach is good if you want to use Esc key to exit from fullscreen mode, also to assign another key (like Enter) or element (like button) to trigger fullscreen mode.

The Fullscreen API adds methods to present a specific Element (and its descendants) in fullscreen mode, and to exit fullscreen mode once it is no longer needed. This makes it possible to present desired content—such as an online game—using the user's entire screen, removing all browser user interface elements and other applications from the screen until fullscreen mode is shut off. MDN

Although, if we using @media query in our css instead of :fullscreen pseudo-class, we also can to use F11 key as a trigger. As a plus, with this approach, we will recive two different notifications about of exiting the fullscreen mode.

enter image description here

import { useEffect, useRef } from "react";
import styled from "styled-components";

const NavbarContainer = styled.div`
  height: 30px;
  background-color: mediumseagreen;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  @media all and (display-mode: fullscreen) {
    display: none;
  }
`;
const FullScreenButton = styled.button`
  padding: 0.5rem 1rem;
  @media all and (display-mode: fullscreen) {
    display: none;
  }
`;

export default function App() {
  const refNavbar = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const navbar = refNavbar.current;

    const actionFn = (event: KeyboardEvent) => {
      if ((event.key === 'Enter') && navbar) {
        navbar.requestFullscreen();
        return;
      }
    };

    document.addEventListener('keyup', actionFn, false);
    return () => {
      document.removeEventListener('keyup', actionFn, false);
    };
  }, []);

  const fullScreenOnClick = () => {
    const navbar = refNavbar.current;
    if (!navbar) return;
    navbar.requestFullscreen();
  };

  return (
    <div className="App">
      <NavbarContainer ref={refNavbar}>Navigation</NavbarContainer>
      <section>
        <p>(User content!)</p>
        <FullScreenButton onClick={fullScreenOnClick}>Fullscreen mode</FullScreenButton>
      </section>
    </div>
  );
}

Edit dazziling-code

Caveat: Fullscreen API with assigned F11 key as trigger.

If you will try to assign the F11 key using the Fullscreen API to be able to exit also with the Esc key you will get strange behavior. It may be the cause of two different events Fullscreen API (with Esc key) and F11 key.

enter image description here

Fullscreen API issue with F11 and Esc buttons.

F11 key can exit programmatic-fullscreen, but programmatic-exitFullscreen cannot exit F11-fullscreen. Which is the problem you are running into. Also, Esc key cannot exit F11-fullscreen, but does exit programmatic-fullscreen. Fullscreen API not working if triggered with F11

Additionally:

Another interesting issue about :fullscreen pseudo-class. If you want to hide more than one element (like a button), this doesn't works as it will be bind to the current element. It's better to use the @media query.

Navbar and botton have a :fullscreen pseudo-class

enter image description here

Anton
  • 8,058
  • 1
  • 9
  • 27
  • Two problems with this: I had to modify useRef(null); to useRef(null); -- without this I got lot of errors indicating I cannot use a String reference. Second problem is that, when I switch to fullscreen by pressing F11, I see message to press esc to exit fullscreen, however after pressing Esc, I'm still in fullscreen mode and I need to press F11 again to exit fullscreen. – vpas Jul 24 '22 at 20:10
  • I have tried the code in your code sandbox, when I press f11 I see that press esc to exit fullscreen, and then after I get message press F11 also . My problem is reproducible by your code. – vpas Jul 25 '22 at 12:37
  • F11 key works like a toggle, while the Esc key only works as a cancel. These both behaviors works separately from each other in that case we have some strange behavior. Esc key overrides previous F11 key event. I'm tried to remap the F11 key and the Esc key, but result is the same or errors or the Esc key works once. [The same issue](https://stackoverflow.com/a/44368592/15545116) – Anton Jul 25 '22 at 14:03
  • If I will remove from the **if** statement F11 key, it will works as a toggle by default without extra pressing. I think it's impassible to assign F11 key to enable fullscreen mode and the Esc key to disable it without strange behavior. You have to decide for yourself which method you want to use. **F11 / F11** switch to fullscreen or assign a key, button to enable fullscreen mode and the Esc key to cancel it. – Anton Jul 25 '22 at 14:12
  • 1
    I tend to agree your investigation, solution and opinion regarding the usage of fullscreen and also F11/Esc explanation, but I would like to wait for some other answers a little bit more. Thanks! – vpas Jul 25 '22 at 14:43
1

The way it works:

const NavbarContainer = styled.div`
  height: 30px;
  background-color: blueviolet;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  @media all and (display-mode: fullscreen) {
    display: none;
  }
`;

The :fullscreen pseudo-class is used for a different purpose. Using javascript you can represent any DOM element to full-screen.

For example, if you will do the following thing:

document.querySelector('#navbar')?.requestFullscreen()

...then #navbar:fullscreen will work.

Entity
  • 1,004
  • 6
  • 12
  • I have to use it with React instead of native JS, also others have already written similar answer sorry. – vpas Jul 25 '22 at 14:45
0

I think that was it

const NavbarContainer = styled.div`
      height: 30px;
      background-color: mediumseagreen;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
      &::-webkit-full-screen {
        display: none;
      }
    `
Poker Player
  • 146
  • 1
  • 4