From e2a20cfed15c405d80dfa54668308680e76d0f66 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Thu, 18 Apr 2024 17:35:47 +0200
Subject: [PATCH] Add fullscreen mode (#13469)

---
 .../Config/UserInterfaceSettings.vue          | 41 +++++++++++++++++++
 i18n/de.toml                                  |  5 +++
 i18n/en.toml                                  |  5 +++
 3 files changed, 51 insertions(+)

diff --git a/assets/js/components/Config/UserInterfaceSettings.vue b/assets/js/components/Config/UserInterfaceSettings.vue
index d30c3ba91e..bdef3dda7f 100644
--- a/assets/js/components/Config/UserInterfaceSettings.vue
+++ b/assets/js/components/Config/UserInterfaceSettings.vue
@@ -58,6 +58,22 @@
 				</div>
 			</div>
 		</FormRow>
+		<FormRow
+			v-if="fullscreenAvailable"
+			id="settingsFullscreen"
+			:label="$t('settings.fullscreen.label')"
+		>
+			<button
+				v-if="fullscreenActive"
+				class="btn btn-sm btn-outline-secondary"
+				@click="exitFullscreen"
+			>
+				{{ $t("settings.fullscreen.exit") }}
+			</button>
+			<button v-else class="btn btn-sm btn-outline-secondary" @click="enterFullscreen">
+				{{ $t("settings.fullscreen.enter") }}
+			</button>
+		</FormRow>
 	</div>
 </template>
 
@@ -75,6 +91,7 @@ import {
 import { getThemePreference, setThemePreference, THEMES } from "../../theme";
 import { getUnits, setUnits, UNITS } from "../../units";
 import { getHiddenFeatures, setHiddenFeatures } from "../../featureflags";
+import { isApp } from "../../utils/native";
 
 export default {
 	name: "UserInterfaceSettings",
@@ -89,10 +106,17 @@ export default {
 			language: getLocalePreference() || "",
 			unit: getUnits(),
 			hiddenFeatures: getHiddenFeatures(),
+			fullscreenActive: false,
 			THEMES,
 			UNITS,
 		};
 	},
+	mounted() {
+		document.addEventListener("fullscreenchange", this.fullscreenChange);
+	},
+	unmounted() {
+		document.removeEventListener("fullscreenchange", this.fullscreenChange);
+	},
 	computed: {
 		languageOptions: () => {
 			const locales = Object.entries(LOCALES).map(([key, value]) => {
@@ -102,6 +126,12 @@ export default {
 			locales.sort((a, b) => (a.name < b.name ? -1 : 1));
 			return locales;
 		},
+		fullscreenAvailable: () => {
+			const isSupported = document.fullscreenEnabled;
+			const isPwa =
+				navigator.standalone || window.matchMedia("(display-mode: standalone)").matches;
+			return isSupported && !isPwa && !isApp();
+		},
 	},
 	watch: {
 		unit(value) {
@@ -122,5 +152,16 @@ export default {
 			}
 		},
 	},
+	methods: {
+		enterFullscreen() {
+			document.documentElement.requestFullscreen();
+		},
+		exitFullscreen() {
+			document.exitFullscreen();
+		},
+		fullscreenChange() {
+			this.fullscreenActive = !!document.fullscreenElement;
+		},
+	},
 };
 </script>
diff --git a/i18n/de.toml b/i18n/de.toml
index 5ac17021d2..27b3c04259 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -479,6 +479,11 @@ filter = "Filtern"
 [settings]
 title = "Darstellung"
 
+[settings.fullscreen]
+enter = "Vollbild starten"
+exit = "Vollbild beenden"
+label = "Vollbild"
+
 [settings.hiddenFeatures]
 label = "Experimentell"
 value = "Experimentelle UI-Funktionen zeigen."
diff --git a/i18n/en.toml b/i18n/en.toml
index bf4939d10b..5ac1f7920c 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -478,6 +478,11 @@ filter = "Filter"
 [settings]
 title = "User Interface"
 
+[settings.fullscreen]
+enter = "Enter fullscreen"
+exit = "Exit fullscreen"
+label = "Fullscreen"
+
 [settings.hiddenFeatures]
 label = "Experimental"
 value = "Show experimental UI features."