Skip to content

Add exit fullscreen button #540

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lucacasonato wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add exit fullscreen button #540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 28 additions & 5 deletions src/main/services/preact-canvas/components/bottom-bar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,19 @@
import { Component, h } from "preact";
import { isFeaturePhone } from "src/main/utils/static-display";
import { bind } from "src/utils/bind";
import { Back, Fullscreen, Information } from "../icons/initial";
import {
Back,
FullscreenEnter,
FullscreenExit,
Information
} from "../icons/initial";
import {
bottomBar,
checkbox,
fpToggle,
fullscreen,
fullscreenEnter,
fullscreenExit,
hidden,
leftIcon,
leftKeyIcon,
Expand All @@ -41,6 +48,12 @@ function goFullscreen() {
}
}

function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}

const fullscreenSupported: boolean = !!(
document.documentElement.requestFullscreen ||
document.documentElement.webkitRequestFullscreen
Expand Down Expand Up @@ -184,20 +197,30 @@ export default class BottomBar extends Component<Props, State> {
""
) : fullscreenSupported ? (
<button
class={fullscreen}
class={fullscreenEnter}
onClick={goFullscreen}
aria-label="fullscreen mode"
aria-label="enter fullscreen mode"
>
<Fullscreen />
<FullscreenEnter />
</button>
) : (
<div class={noFullscreen} />
);

return (
<div class={[bottomBar, display ? "" : hidden].join(" ")} role="menubar">
{buttonType === "back" ? backBtn : infoBtn}
{showDangerModeToggle && toggleBtn}
{fullscreenSupported ? fullscreenBtn : <div class={noFullscreen} />}
<div class={fullscreen}>
<button
class={fullscreenExit}
onClick={exitFullscreen}
aria-label="exit fullscreen mode"
>
<FullscreenExit />
</button>
{fullscreenSupported ? fullscreenBtn : <div class={noFullscreen} />}
</div>
</div>
);
}
Expand Down
42 changes: 34 additions & 8 deletions src/main/services/preact-canvas/components/bottom-bar/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@
position: absolute;
}

.bottom-bar > button {
.bottom-bar > button,
.bottom-bar > .fullscreen {
margin: var(--bar-padding) 0;
}

Expand Down Expand Up @@ -64,30 +65,55 @@
}

.fullscreen {
composes: icons;
display: flex;
align-items: center;

/* PostCSS gets the order wrong :( */
margin-left: auto !important;
}

.fullscreen-enter {
composes: icons;
}

.fullscreen-exit {
composes: icons;
display: none;
}

.no-fullscreen {
margin-left: auto;
width: var(--icon-size);
height: var(--icon-size);
}

html:fullscreen .fullscreen {
visibility: hidden;
html:fullscreen .fullscreen-enter {
display: none;
}

/* For Safari. This can't be combined with the rule above, as Safari sees :fullscreen as invalid,
and craps itself. */
html:-webkit-full-screen .fullscreen {
visibility: hidden;
html:-webkit-full-screen .fullscreen-enter {
display: none;
}

html:fullscreen .fullscreen-exit {
display: block;
}

/* For Safari. This can't be combined with the rule above, as Safari sees :fullscreen as invalid,
and craps itself. */
html:-webkit-full-screen .fullscreen-exit {
display: block;
}

@media (display-mode: fullscreen) {
.fullscreen {
visibility: hidden;
.fullscreen-enter {
display: none;
}

.fullscreen-exit {
display: block;
}
}

Expand Down
8 changes: 7 additions & 1 deletion src/main/services/preact-canvas/components/icons/initial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,18 @@ import { h } from "preact";

// tslint:disable:max-line-length variable-name

export const Fullscreen = (props: JSX.HTMLAttributes) => (
export const FullscreenEnter = (props: JSX.HTMLAttributes) => (
<svg viewBox="0 0 24 24" {...props}>
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
</svg>
);

export const FullscreenExit = (props: JSX.HTMLAttributes) => (
<svg viewBox="0 0 24 24" {...props}>
<path d="M14 14h5v2h-3v3h-2v-5m-9 0h5v5H8v-3H5v-2m3-9h2v5H5V8h3V5m11 3v2h-5V5h2v3h3Z" />
</svg>
);

export const Information = (props: JSX.HTMLAttributes) => (
<svg viewBox="0 0 24 24" {...props}>
<path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
Expand Down