Spaces:

pachet
/

continuator_front

Sleeping

François Pachet commited on 29 days ago

Commit

7a29cd5

1 Parent(s): 4b17f2c

Make phone layout load reliably

Files changed (4) hide show

README.md CHANGED Viewed

@@ -86,10 +86,12 @@ The UX principle is to keep the performance flow visible at all times and hide l
 Phones use the same application and backend as desktop browsers. A compact,
 touch-oriented layout is selected from viewport and pointer capabilities rather
 than device names. Detection combines the current viewport, mobile browser
-client hints, touch-pointer capability, and physical CSS screen dimensions so
-Android phones still select the phone surface when the browser reports a
-desktop-sized viewport. The phone surface contains only the virtual keyboard,
-a small live-status message, and the captured/generated piano rolls.
 Configuration, accounts, memory inspection, hardware MIDI, and device routing
 remain available in the unchanged desktop/tablet layout.

 Phones use the same application and backend as desktop browsers. A compact,
 touch-oriented layout is selected from viewport and pointer capabilities rather
 than device names. Detection combines the current viewport, mobile browser
+client hints, phone browser identification, touch-pointer capability, and
+physical CSS screen dimensions so Android phones still select the phone surface
+when the browser reports a desktop-sized viewport. The layout class is applied
+before styles load to avoid briefly showing the full desktop controls. The phone
+surface contains only the virtual keyboard, a small live-status message, and the
+captured/generated piano rolls.
 Configuration, accounts, memory inspection, hardware MIDI, and device routing
 remain available in the unchanged desktop/tablet layout.

backend/app/main.py CHANGED Viewed

@@ -105,7 +105,10 @@ def require_current_user(
 @app.get("/", include_in_schema=False)
 def read_index() -> FileResponse:
-    return FileResponse(settings.frontend_dir / "index.html")
 @app.get("/health", tags=["system"])

 @app.get("/", include_in_schema=False)
 def read_index() -> FileResponse:
+    return FileResponse(
+        settings.frontend_dir / "index.html",
+        headers={"Cache-Control": "no-cache, must-revalidate"},
+    )
 @app.get("/health", tags=["system"])

frontend/app.js CHANGED Viewed

@@ -1626,6 +1626,9 @@ function isPhoneLayout() {
     window.matchMedia?.(PHONE_LAYOUT_MEDIA_QUERY).matches,
   );
   const mobileClientHint = navigator.userAgentData?.mobile === true;
   const coarseTouch =
     Boolean(window.matchMedia?.("(pointer: coarse)").matches) ||
     navigator.maxTouchPoints > 0;
@@ -1639,6 +1642,7 @@ function isPhoneLayout() {
   return (
     responsiveMatch ||
     mobileClientHint ||
     (coarseTouch && compactPhysicalScreen)
   );
 }

     window.matchMedia?.(PHONE_LAYOUT_MEDIA_QUERY).matches,
   );
   const mobileClientHint = navigator.userAgentData?.mobile === true;
+  const phoneUserAgent = /Android.+Mobile|iPhone|iPod/i.test(
+    navigator.userAgent || "",
+  );
   const coarseTouch =
     Boolean(window.matchMedia?.("(pointer: coarse)").matches) ||
     navigator.maxTouchPoints > 0;
   return (
     responsiveMatch ||
     mobileClientHint ||
+    phoneUserAgent ||
     (coarseTouch && compactPhysicalScreen)
   );
 }

frontend/index.html CHANGED Viewed

@@ -6,7 +6,23 @@
     <meta name="color-scheme" content="only light" />
     <meta name="theme-color" content="#071217" />
     <title>Web Continuator</title>
-    <link rel="stylesheet" href="/assets/styles.css?v=20260729-phone5" />
   </head>
   <body>
     <div class="page-aura"></div>
@@ -1198,6 +1214,6 @@
       </section>
     </main>
-    <script type="module" src="/assets/app.js?v=20260729-phone4"></script>
   </body>
 </html>

     <meta name="color-scheme" content="only light" />
     <meta name="theme-color" content="#071217" />
     <title>Web Continuator</title>
+    <script>
+      (() => {
+        const requestedLayout = new URLSearchParams(window.location.search).get("layout");
+        const phoneUserAgent = /Android.+Mobile|iPhone|iPod/i.test(
+          navigator.userAgent || "",
+        );
+        const narrowViewport = window.matchMedia?.("(max-width: 700px)").matches;
+        const phoneLayout =
+          requestedLayout === "phone" ||
+          (requestedLayout !== "desktop" &&
+            (phoneUserAgent ||
+              navigator.userAgentData?.mobile === true ||
+              narrowViewport));
+        document.documentElement.classList.toggle("phone-layout", phoneLayout);
+      })();
+    </script>
+    <link rel="stylesheet" href="/assets/styles.css?v=20260729-phone6" />
   </head>
   <body>
     <div class="page-aura"></div>
       </section>
     </main>
+    <script type="module" src="/assets/app.js?v=20260729-phone6"></script>
   </body>
 </html>