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;"><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,85 @@
         window.appTitle  = {$name};
         window.appPerms  = {$perms};
         window.appOrigin = {$origin};
+        window.fsApps    = JSON.parse(localStorage.getItem("fullscreen_apps") || "[]");
+    </script>
+
+    <script n:syntax="double">
+        u("head").append(u(`
+            <style>
+                html.app_fullscreen {
+                    overflow-y: hidden !important;
+                }
+                .page_yellowheader.app_fullscreen span {
+                    margin-right: calc(${getComputedStyle(u(".page_yellowheader").nodes[0]).paddingRight} * 2);
+                }
+                body.dimmed .dimmer {
+                    z-index: 1023;
+                }
+                #ajax_audio_player {
+                    z-index: 1020;
+                }
+                .page_yellowheader.app_fullscreen {
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    z-index: 1021;
+                }
+                #appFrame.app_fullscreen {
+                    position: fixed;
+                    top: ${u(".page_yellowheader").nodes[0].getBoundingClientRect().height}px;
+                    left: 0;
+                    width: 100%;
+                    height: calc(100% - ${u(".page_yellowheader").nodes[0].getBoundingClientRect().height}px);
+                    z-index: 1021;
+                }
+            </style>
+        `))
+
+        function goFullscreen() {
+            u("html").addClass("app_fullscreen")
+            u(".page_yellowheader").addClass("app_fullscreen")
+            u("#appFrame").addClass("app_fullscreen")
+        }
+
+        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(".page_yellowheader").removeClass("app_fullscreen")
+                u("#appFrame").removeClass("app_fullscreen")
+            } 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/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" = "Подробнее";