feat(apps): enable fullscreen

Web/Presenters/templates/Apps/Play.latte

@@ -16,7 +16,7 @@
 
 {block header}
     {$name}
-    <a style="float: right;" onClick="reportApp({$id})" n:if="$canReport ?? false">{_report}</a>
+    <span style="float: right; font-weight: bold; padding: 0;"><a onClick="reportApp({$id})" n:if="$canReport ?? false">[{_report}]</a> <a onClick="showAppSettings({rawurlencode($csrfToken)}, {!$canReport})">[{_menu_settings}]</a> <a class="app_fullscreen">[🗗]</a></span>
 {/block}
 
 {block content}
@@ -43,6 +43,53 @@
         window.appTitle  = {$name};
         window.appPerms  = {$perms};
         window.appOrigin = {$origin};
+        window.fsApps    = JSON.parse(localStorage.getItem("fullscreen_apps") || "[]");
+    </script>
+
+    <script n:syntax="double">
+        function goFullscreen() {
+            u("html").addClass("app_fullscreen")
+            u("#appFrame").parent().addClass("app_fullscreen")
+            u("#appFrame").parent().prepend(u(".page_yellowheader"))
+        }
+
+        if (window.fsApps.includes(window.appId)) { goFullscreen() }
+
+        u("a.app_fullscreen").on("click", (e) => {
+            if (u("html").hasClass("app_fullscreen")) {
+                u("html").removeClass("app_fullscreen")
+                u("#appFrame").parent().removeClass("app_fullscreen")
+                u("#appFrame").parent().children(".page_yellowheader").remove() 
+            } else {
+                goFullscreen()
+            }
+            if (e.ctrlKey) {
+                u("#appFrame").nodes[0].src = u("#appFrame").nodes[0].src
+            }
+        })
+
+        function showAppSettings(hash, isDev) {
+            MessageBox(
+                tr("menu_settings"),
+                `
+                    <center>
+                        <label><input id="startFullscreen" name="startFullscreen" type="checkbox" ${window.fsApps.includes(window.appId) ? "checked" : ""}>${tr("app_start_fullscreen")}</label>
+                        <hr>
+                        ${isDev ? `<a href="/editapp?app=${window.appId}">${tr("app_edit")}</a><br> ` : ""}
+                        <a href="/apps/uninstall?hash=${hash}&app=${window.appId}">${tr("app_uninstall")}</a>
+                    </center>
+                `,
+                [tr("cancel"), tr("save")],
+                [() => {}, () => {
+                    if (u("#startFullscreen").is(":checked")) {
+                        if (!window.fsApps.includes(window.appId)) { window.fsApps.push(window.appId) }
+                    } else {
+                        if (window.fsApps.includes(window.appId)) { window.fsApps.splice(window.fsApps.indexOf(window.appId), 1) }
+                    }
+                    localStorage.setItem("fullscreen_apps", JSON.stringify(window.fsApps));
+                }]
+            )
+        }
     </script>
 
     {script "js/al_games.js"}

Web/static/css/main.css

@@ -4828,3 +4828,45 @@ hr {
         white-space: nowrap;
     }
 }
+
+html.app_fullscreen {
+    overflow-y: hidden !important;
+}
+
+html.app_fullscreen .page_header {
+    z-index: 0;
+}
+
+html.app_fullscreen #app_dev {
+    display: none;
+}
+
+body.dimmed .dimmer {
+    z-index: 1023;
+}
+
+#ajax_audio_player {
+    z-index: 1020;
+}
+
+center.app_fullscreen {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    width: 100vw;
+    height: 100vh;
+    text-align: left;
+    top: 0;
+    left: 0;
+}
+
+.app_fullscreen #appFrame, .app_fullscreen .page_yellowheader {
+    z-index: 1021;
+}
+
+.app_fullscreen #appFrame {
+    position: relative;
+    width: 100% !important;
+    height: auto !important;
+    flex: 1;
+}

Web/static/js/options.js

@@ -181,6 +181,12 @@ window.tweaks = [
         `)
         u("#appFrame").closest("center").addClass("app_block")
     }),
+    new TweakOption("apps.fullscreen_show_notifications", function () {
+        this.customCSS(`html.app_fullscreen .notifications_global_wrap {z-index: 1022;}`)
+    }),
+    new TweakOption("apps.fullscreen_show_ajax_player", function () {
+        this.customCSS(`html.app_fullscreen #ajax_audio_player {z-index: 1025;}`)
+    }),
     new TweakOption("wall.hide_edit_mark", function () {
         this.customCSS(`.editedMark {display: none;}`)
     }),

Web/static/js/router.js

@@ -160,6 +160,8 @@ window.router = new class {
             await window.player._handlePageTransition()
         }
 
+        if (u("html").hasClass("app_fullscreen")) { u("html").removeClass("app_fullscreen") }
+
         this.applyTweaks()
 
         /*window.document.dispatchEvent(new Event("DOMContentLoaded", {

locales/en.strings

@@ -1339,6 +1339,7 @@
 "app_err_note_desc" = "Make sure the link is correct and the note belongs to you.";
 "app_delete_modal_desc" = "Are you sure you want to delete the app? This action cannot be undone.";
 "app_delete_succ" = "The app has been deleted";
+"app_start_fullscreen" = "Start app in fullscreen mode automatically";
 
 "learn_more" = "Learn more";
 

locales/ru.strings

@@ -1272,6 +1272,7 @@
 "app_err_note_desc" = "Убедитесь, что ссылка правильная и заметка принадлежит Вам.";
 "app_delete_modal_desc" = "Вы уверены, что хотите удалить приложение? Это действие нельзя отменить.";
 "app_delete_succ" = "Приложение удалено";
+"app_start_fullscreen" = "Автоматически запускать приложение в полноэкранном режиме";
 
 "learn_more" = "Подробнее";