blob: 9ad4ce63e0a49576866fc91903aeeeb29066d36a (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<script lang="ts">
import { accelerator } from '$lib/Shortcuts';
import { toastFinally } from '$lib/Toasts';
let { dialog }: { dialog?: HTMLElement } = $props();
function onclick() {
if (isFullscreen) {
document.exitFullscreen().catch(toastFinally);
} else if (dialog?.requestFullscreen) {
dialog.requestFullscreen().catch(toastFinally);
}
}
let fullscreenElement: HTMLElement | null = $state(null);
let isFullscreen = $derived(fullscreenElement !== null);
</script>
<svelte:document bind:fullscreenElement />
<button
type="button"
class="btn-transparent"
title="Toggle fullscreen"
aria-label="Toggle fullscreen"
{onclick}
use:accelerator={'f'}
>
{#if isFullscreen}
<span class="icon-lg icon-[material-symbols--fullscreen-exit]"></span>
{:else}
<span class="icon-lg icon-[material-symbols--fullscreen]"></span>
{/if}
</button>
|
