From 61e36be06f97972c1a8721a142a31e3084df56f7 Mon Sep 17 00:00:00 2001
From: dprevoznik <58714078+dprevoznik@users.noreply.github.com>
Date: Tue, 16 Jun 2026 04:34:23 +0000
Subject: [PATCH] hide request-control mouse icon in read-only live view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In read-only mode the session is locked and clicking the icon can't
actually take control — it was just visual noise in the top-right
corner. Pass the read-only state into the video component and hide
the toggle when set.

Also dedupes the read-only query-param parsing into a single getter.
---
 images/chromium-headful/client/src/app.vue           | 12 ++++++++----
 .../chromium-headful/client/src/components/video.vue |  4 +++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/images/chromium-headful/client/src/app.vue b/images/chromium-headful/client/src/app.vue
index 53166109..060184b1 100644
--- a/images/chromium-headful/client/src/app.vue
+++ b/images/chromium-headful/client/src/app.vue
@@ -13,6 +13,7 @@
             ref="video"
             :hideControls="hideControls"
             :extraControls="isEmbedMode"
+            :readOnly="isReadOnlyMode"
             @control-attempt="controlAttempt"
           />
         </div>
@@ -222,6 +223,12 @@
       return !!new URL(location.href).searchParams.get('embed')
     }
 
+    get isReadOnlyMode() {
+      const params = new URL(location.href).searchParams
+      const value = params.get('readOnly') || params.get('readonly') || params.get('ro')
+      return typeof value === 'string' && ['1', 'true', 'yes'].includes(value.toLowerCase())
+    }
+
     get hideControls() {
       return this.isCastMode
     }
@@ -318,10 +325,7 @@
         }
       }
 
-      // Handle readOnly query param (e.g., ?readOnly=true or ?readonly=1)
-      const readOnlyParam = params.get('readOnly') || params.get('readonly') || params.get('ro')
-      const readOnly = typeof readOnlyParam === 'string' && ['1', 'true', 'yes'].includes(readOnlyParam.toLowerCase())
-      if (readOnly) {
+      if (this.isReadOnlyMode) {
         // Disable implicit hosting so the user doesn't automatically gain control
         this.$accessor.remote.setImplicitHosting(false)
         // Lock the session locally to block any input even if hosting is later requested
diff --git a/images/chromium-headful/client/src/components/video.vue b/images/chromium-headful/client/src/components/video.vue
index 2e308417..2a8a8c8f 100644
--- a/images/chromium-headful/client/src/components/video.vue
+++ b/images/chromium-headful/client/src/components/video.vue
@@ -43,7 +43,7 @@
         <li><i @click.stop.prevent="requestFullscreen" class="fas fa-expand"></i></li>
         <li v-if="admin"><i @click.stop.prevent="openResolution" class="fas fa-desktop"></i></li>
         -->
-        <li v-if="!controlLocked && !implicitHosting" :class="extraControls || 'extra-control'">
+        <li v-if="!controlLocked && !implicitHosting && !readOnly" :class="extraControls || 'extra-control'">
           <i
             :class="[
               hosted && !hosting ? 'disabled' : '',
@@ -257,6 +257,8 @@
     @Prop(Boolean) readonly hideControls!: boolean
     // extra controls are shown (e.g. for embed mode)
     @Prop(Boolean) readonly extraControls!: boolean
+    // hide the request-control toggle (input is locked, so it can't do anything)
+    @Prop(Boolean) readonly readOnly!: boolean
 
     private keyboard = GuacamoleKeyboard()
     private observer = new ResizeObserver(this.onResize.bind(this))