orientation fixes

Sandeep · Sandeep · commit 50e9bfe41d92 · 2026-02-21T14:59:45.000-05:00
diff --git a/src/app/components/chat/chat.component.ts b/src/app/components/chat/chat.component.ts
@@ -229,7 +229,7 @@ import { ScreenShareService } from '../../services/screen-share.service';
         </div>
       </div>
 
-      <div class="chat-footer">
+      <div class="chat-footer hide-on-landscape">
         Powered By <a href="https://www.publichome.page" target="_blank">www.publichome.page</a> All rights reserved. <a href="#">Terms & Policy</a>
       </div>
     </div>
@@ -246,6 +246,22 @@ import { ScreenShareService } from '../../services/screen-share.service';
       padding: 20px;
       max-width: 100%;
       box-sizing: border-box;
+      transition: padding 0.3s;
+    }
+
+    /* Aggressive mobile landscape optimizations */
+    @media (max-width: 932px) and (orientation: landscape) {
+      .app-shell {
+        padding: 0 !important;
+      }
+      .hide-on-landscape {
+        display: none !important;
+      }
+      .app-shell .chat-header, 
+      .app-shell .tab-bar, 
+      .app-shell .chat-footer {
+        display: none !important;
+      }
     }
 
     /* ==============================
@@ -1074,9 +1090,33 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     if (e.matches && this.ss.status() === 'connected') {
       this.activeTab.set('screen');
     }
+    // When transitioning to desktop/landscape mode with screen share active,
+    // maximize the screen share panel automatically.
+    if (!e.matches && this.ss.status() === 'connected') {
+      this.desktopLayout.set('screen-full');
+    }
     this.isMobile.set(e.matches);
   };
 
+  @HostListener('window:orientationchange')
+  onOrientationChange(): void {
+    // Give the browser time to settle dimensions after rotation
+    setTimeout(() => {
+      if (this.ss.status() !== 'connected') return;
+      const isLandscape = window.matchMedia('(orientation: landscape)').matches;
+      if (isLandscape) {
+        if (this.isMobile()) {
+          // Still in mobile mode (narrow landscape) — ensure screen tab is active
+          // so the screen share panel is visible even though the tab bar is hidden
+          this.activeTab.set('screen');
+        } else {
+          // Desktop mode — maximize screen share panel
+          this.desktopLayout.set('screen-full');
+        }
+      }
+    }, 150);
+  }
+
   ngAfterViewChecked(): void {
     if (this.shouldScroll) {
       this.scrollToBottom();
diff --git a/src/app/components/screen-share/screen-share.component.ts b/src/app/components/screen-share/screen-share.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild, OnInit, AfterViewInit, computed, effect, signal } from '@angular/core';
+import { Component, ElementRef, ViewChild, OnInit, AfterViewInit, computed, effect, signal, HostListener } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { ScreenShareService } from '../../services/screen-share.service';
@@ -143,6 +143,13 @@ import { ScreenShareService } from '../../services/screen-share.service';
             </svg>
             <span class="btn-text">Fullscreen</span>
           </button>
+          <button class="tool-btn hide-text-mobile" (click)="toggleRotate()" title="Rotate View" [class.active]="isRotated()">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="23 4 23 10 17 10"/>
+              <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
+            </svg>
+            <span class="btn-text">Rotate</span>
+          </button>
           <button class="tool-btn hide-text-mobile" (click)="ss.toggleScaleViewport()" title="Scale to Fit" [class.active]="ss.scaleViewport()">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
@@ -151,13 +158,6 @@ import { ScreenShareService } from '../../services/screen-share.service';
             </svg>
             <span class="btn-text">Scale to Fit</span>
           </button>
-          <button class="tool-btn hide-text-mobile" (click)="ss.sendCtrlAltDel()" title="Send Ctrl+Alt+Del">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <rect x="2" y="4" width="20" height="16" rx="2"/>
-              <path d="M6 8h.01M10 8h.01M14 8h.01M18 8h.01M8 12h8M6 16h.01M18 16h.01"/>
-            </svg>
-            <span class="btn-text">Ctrl+Alt+Del</span>
-          </button>
           <div class="toolbar-spacer"></div>
           <button class="tool-btn tool-btn-danger" (click)="disconnect()">
             Disconnect
@@ -658,6 +658,11 @@ export class ScreenShareComponent implements AfterViewInit {
 
   readonly configOpen = signal(false);
   readonly showAll = signal(false);
+  readonly isRotated = signal(false);
+
+  // True when fullscreen auto-rotated on mobile (so we undo it on exit).
+  private autoRotatedForFullscreen = false;
+  private readonly mobileQuery = window.matchMedia('(max-width: 767px)');
 
   readonly isConnected = computed(() => this.ss.status() === 'connected');
   readonly isConnecting = computed(() => this.ss.status() === 'connecting');
@@ -732,20 +737,126 @@ export class ScreenShareComponent implements AfterViewInit {
   }
 
   disconnect(): void {
+    if (this.isRotated()) {
+      this.isRotated.set(false);
+      this.clearRotationStyles();
+    }
     this.ss.disconnect();
   }
 
   dismissError(): void {
     this.errorDismissed.set(true);
   }
 
+  @HostListener('window:resize')
+  @HostListener('window:orientationchange')
+  handleResize(): void {
+    if (this.isConnected()) {
+      setTimeout(() => {
+        if (this.isRotated()) {
+          this.applyRotationStyles();
+        } else {
+          this.ss.recalculateScaling();
+        }
+      }, 100);
+    }
+  }
+
+  @HostListener('document:fullscreenchange')
+  onFullscreenChange(): void {
+    if (document.fullscreenElement) {
+      // ── Entering fullscreen ──────────────────────────────────────────────
+      if (this.mobileQuery.matches && !this.isRotated()) {
+        // Mobile only: auto-rotate if not already rotated.
+        this.autoRotatedForFullscreen = true;
+        this.isRotated.set(true);
+        setTimeout(() => this.applyRotationStyles(), 150);
+      } else {
+        // Already rotated (any device) or desktop — just re-fit dimensions.
+        setTimeout(() => {
+          if (this.isRotated()) this.applyRotationStyles();
+          else this.ss.recalculateScaling();
+        }, 150);
+      }
+    } else {
+      // ── Exiting fullscreen ───────────────────────────────────────────────
+      if (this.autoRotatedForFullscreen) {
+        // Undo the auto-rotation that fullscreen applied.
+        this.autoRotatedForFullscreen = false;
+        this.isRotated.set(false);
+        this.clearRotationStyles();
+        this.ss.recalculateScaling();
+      } else {
+        setTimeout(() => {
+          if (this.isRotated()) this.applyRotationStyles();
+          else this.ss.recalculateScaling();
+        }, 150);
+      }
+    }
+  }
+
+  toggleRotate(): void {
+    this.isRotated.update(v => !v);
+    setTimeout(() => {
+      if (this.isRotated()) {
+        this.applyRotationStyles();
+      } else {
+        this.clearRotationStyles();
+        this.ss.recalculateScaling();
+      }
+    }, 50);
+  }
+
+  private applyRotationStyles(): void {
+    const container = this.vncContainer?.nativeElement;
+    if (!container) return;
+    const parent = container.parentElement!;
+
+    // When rotated, the element's layout box extends outside the parent bounds
+    // (negative left offset). Allow it — the *visual* result (post-transform)
+    // still fits inside. The ancestor main-layout provides the outer clip.
+    parent.style.overflow = 'visible';
+
+    // In fullscreen, window.inner* gives the settled viewport size immediately;
+    // parent.clientWidth/Height may not have updated yet when this runs.
+    const inFullscreen = !!document.fullscreenElement;
+    const pw = inFullscreen ? window.innerWidth  : parent.clientWidth;
+    const ph = inFullscreen ? window.innerHeight : parent.clientHeight;
+
+    container.style.position       = 'absolute';
+    container.style.width          = ph + 'px';
+    container.style.height         = pw + 'px';
+    container.style.top            = ((ph - pw) / 2) + 'px';
+    container.style.left           = ((pw - ph) / 2) + 'px';
+    container.style.transformOrigin = 'center center';
+    container.style.transform      = 'rotate(90deg)';
+    this.ss.recalculateScaling();
+  }
+
+  private clearRotationStyles(): void {
+    const container = this.vncContainer?.nativeElement;
+    if (!container) return;
+    // Restore the parent's overflow before clearing container styles.
+    if (container.parentElement) {
+      container.parentElement.style.overflow = '';
+    }
+    container.style.position       = '';
+    container.style.width          = '';
+    container.style.height         = '';
+    container.style.top            = '';
+    container.style.left           = '';
+    container.style.transform      = '';
+  }
+
   toggleFullscreen(): void {
     const container = this.vncContainer?.nativeElement;
     if (!container) return;
     if (document.fullscreenElement) {
       document.exitFullscreen();
     } else {
-      container.requestFullscreen();
+      // Fullscreen the *parent* (viewer-area) so the vncContainer's rotation
+      // styles remain relative to a stable parent element throughout.
+      (container.parentElement ?? container).requestFullscreen();
     }
   }
 
diff --git a/src/app/components/settings/settings.component.ts b/src/app/components/settings/settings.component.ts
@@ -1,7 +1,7 @@
-import { Component, EventEmitter, Output, signal } from '@angular/core';
+import { Component, EventEmitter, Output, effect, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { ConnectionConfig } from '../../services/openclaw.service';
+import { ConnectionConfig, OpenClawService } from '../../services/openclaw.service';
 
 @Component({
   selector: 'app-settings',
@@ -285,8 +285,21 @@ export class SettingsComponent {
   authToken = '';
   authPassword = '';
 
-  constructor() {
+  constructor(private openClaw: OpenClawService) {
     this.loadFromStorage();
+
+    // Auto-close when connected; re-open on disconnect/error (only after a
+    // successful connection so the panel doesn't pop on every fresh page load).
+    let wasConnected = false;
+    effect(() => {
+      const s = this.openClaw.connectionStatus();
+      if (s === 'connected') {
+        wasConnected = true;
+        this.isOpen.set(false);
+      } else if (wasConnected && (s === 'disconnected' || s === 'error')) {
+        this.isOpen.set(true);
+      }
+    });
   }
 
   toggle(): void {
diff --git a/src/app/services/screen-share.service.ts b/src/app/services/screen-share.service.ts
@@ -80,8 +80,24 @@ export class ScreenShareService {
     }
   }
 
-  sendCtrlAltDel(): void {
-    this.rfb?.sendCtrlAltDel();
+
+
+  /**
+   * Forces the noVNC viewer to recalculate its scaling and viewport.
+   * Useful when the device orientation changes or the container is resized.
+   */
+  recalculateScaling(): void {
+    if (this.rfb && this.scaleViewport()) {
+      // Re-applying the scaleViewport property triggers noVNC's internal 
+      // scaling logic which recalculates based on the current container size.
+      this.rfb.scaleViewport = false;
+      // Small tick to ensure the DOM layout has settled
+      setTimeout(() => {
+        if (this.rfb) {
+          this.rfb.scaleViewport = true;
+        }
+      }, 10);
+    }
   }
 
   async preloadNoVNC(): Promise<void> {
