Add fullscreen mode (#13469)

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>

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

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