From 7d9cc7d1b45ae5c968f8e8624745329955649224 Mon Sep 17 00:00:00 2001
From: cvmuser1000 <cvmuser1000@noreply.gitea.com>
Date: Sun, 3 Nov 2024 10:36:24 +0000
Subject: [PATCH] fullscreen button

---
 src/html/index.html | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/html/index.html b/src/html/index.html
index 52c36fe..7368d21 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -251,6 +251,41 @@
                 <button class="btn btn-secondary" id="voteResetButton"><i class="fa-solid fa-rotate-left"></i> <span id="voteForResetBtnText"></span></button>
                 <button class="btn btn-secondary" id="screenshotButton"><i class="fa-solid fa-camera"></i> <span id="screenshotBtnText"></span></button>
                 <button class="btn btn-secondary" id="ctrlAltDelBtn"><i class="fa-solid fa-gear"></i> <span id="ctrlAltDelBtnText"></span></button>
+                <button class="btn btn-secondary" id="fullscreenBtn" onclick="
+                    const vmDisplay = document.getElementById('vmDisplay');
+                    const canvas = vmDisplay.querySelector('canvas');
+                    if (vmDisplay && canvas) {
+                    if (!document.fullscreenElement) {
+                    vmDisplay.requestFullscreen()
+                    .then(() => resizeCanvas(true))
+                    .catch(err => console.error('Error attempting to enable fullscreen mode:', err));
+                    } else {
+                    document.exitFullscreen()
+                    .then(() => resizeCanvas(false))
+                    .catch(err => console.error('Error attempting to exit fullscreen mode:', err));
+                    }
+                    } else {
+                    console.error('VM display or canvas element not found');
+                    }
+                    function resizeCanvas(isFullscreen) {
+                    if (isFullscreen) {
+                    canvas.style.width = '100vw';
+                    canvas.style.height = '100vh';
+                    } else {
+                    canvas.style.width = '720px';
+                    canvas.style.height = '400px';
+                    }
+                    }
+                    document.onfullscreenchange = () => {
+                    resizeCanvas(!!document.fullscreenElement);
+                    };
+                    ">
+                    <svg class="svg-inline--fa fa-expand" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="expand" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                    <path fill="currentColor" d="M0 0v192h96v-96h96v-96h-192zm96 224v96h96v192h96v-96h96v-96h96v-96h-96v-96h-96v-96h-96v96h-96v96h-96v96h96z"></path>
+                    </svg>
+                    <span id="fullscreenBtnText">Fullscreen VM</span>
+                    </button>
+
                 <div id="staffbtns">
                     <button class="btn btn-secondary" id="restoreBtn"><i class="fa-solid fa-rotate-left"></i> <span id="restoreBtnText"></span></button>
                     <button class="btn btn-secondary" id="rebootBtn"><i class="fa-solid fa-power-off"></i> <span id="rebootBtnText"></span></button>