Add fullscreen icon on the front mage

kwaroran · Mar 14, 2024 · aad0722 · aad0722
1 parent a8a8347
commit aad0722
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/lib/Others/GithubStars.svelte b/src/lib/Others/GithubStars.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { MailIcon, WalletIcon } from "lucide-svelte";
-  import { isTauri, openURL } from "src/ts/storage/globalApi";
+  import { MailIcon, MaximizeIcon, WalletIcon } from "lucide-svelte";
+  import { isTauri, openURL, toggleFullscreen } from "src/ts/storage/globalApi";
 
 </script>
 <svelte:head>
@@ -27,4 +27,11 @@
   }}>
     <MailIcon size={24} />
   </button>
+  {#if !isTauri}
+    <button class="text-textcolor" on:click={() => {
+      toggleFullscreen()
+    }}>
+      <MaximizeIcon size={24} />
+    </button>
+  {/if}
 </div>
diff --git a/src/ts/storage/globalApi.ts b/src/ts/storage/globalApi.ts
@@ -1468,4 +1468,8 @@ export async function fetchNative(url:string, arg:{
 
 export function textifyReadableStream(stream:ReadableStream<Uint8Array>){
     return new Response(stream).text()
+}
+
+export function toggleFullscreen(){
+    document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen()
 }