<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>