feat: add ENABLE_READONLY_VIEW environment flag to enable a read-only view of the browser.

unikernels/unikraft-cu/client/src/components/controls.vue

@@ -1,5 +1,6 @@
 <template>
   <ul>
+<!--KERNEL
     <li v-if="!implicitHosting && (!controlLocked || hosting)">
       <i
         :class="[
@@ -53,7 +54,6 @@
         @click.stop.prevent="toggleMedia"
       />
     </li>
-<!--KERNEL
     <li>
       <div class="volume">
         <i

unikernels/unikraft-cu/client/src/components/video.vue

@@ -265,6 +265,10 @@
       return this.$accessor.connecting
     }
 
+    get controlling() {
+      return this.$accessor.remote.controlling
+    }
+
     get hosting() {
       return this.$accessor.remote.hosting
     }
@@ -754,12 +758,17 @@
       first.target.dispatchEvent(simulatedEvent)
     }
 
+    isMouseDown = false
+
     onMouseDown(e: MouseEvent) {
-      if (!this.hosting) {
-        this.$emit('control-attempt', e)
+      this.isMouseDown = true
+
+      if (this.locked) {
+        return
       }
 
-      if (!this.hosting || this.locked) {
+      if (!this.controlling) {
+        this.implicitHostingRequest(e)
         return
       }
 
@@ -768,14 +777,57 @@
     }
 
     onMouseUp(e: MouseEvent) {
-      if (!this.hosting || this.locked) {
+      if (!this.isMouseDown) return
+      this.isMouseDown = false
+
+      if (this.locked) {
+        return
+      }
+
+      if (!this.controlling) {
+        this.implicitHostingRequest(e)
         return
       }
 
       this.sendMousePos(e)
       this.$client.sendData('mouseup', { key: e.button + 1 })
     }
 
+    private reqMouseDown: MouseEvent | null = null
+    private reqMouseUp: MouseEvent | null = null
+
+    @Watch('controlling')
+    onControlChange(controlling: boolean) {
+      if (controlling && this.reqMouseDown) {
+        this.onMouseDown(this.reqMouseDown)
+      }
+
+      if (controlling && this.reqMouseUp) {
+        this.onMouseUp(this.reqMouseUp)
+      }
+
+      this.reqMouseDown = null
+      this.reqMouseUp = null
+    }
+
+    implicitHostingRequest(e: MouseEvent) {
+      if (this.implicitHosting) {
+        if (e.type === 'mousedown') {
+          this.reqMouseDown = e
+          this.reqMouseUp = null
+          this.$accessor.remote.request()
+          this.syncClipboard()
+        } else if (e.type === 'mouseup') {
+          this.reqMouseUp = e
+        }
+        return
+      }
+
+      if (e.type === 'mousedown') {
+        this.$emit('control-attempt', e)
+      }
+    }
+
     onMouseMove(e: MouseEvent) {
       if (!this.hosting || this.locked) {
         return

unikernels/unikraft-cu/client/src/store/remote.ts

@@ -18,6 +18,9 @@ export const state = () => ({
 })
 
 export const getters = getterTree(state, {
+  controlling: (state, getters, root) => {
+    return root.user.id === state.id
+  },
   hosting: (state, getters, root) => {
     return root.user.id === state.id || state.implicitHosting
   },
@@ -89,7 +92,7 @@ export const actions = actionTree(
     },
 
     request({ getters }) {
-      if (!accessor.connected || getters.hosting) {
+      if (!accessor.connected || getters.controlling) {
         return
       }
 

unikernels/unikraft-cu/neko.yaml

@@ -9,7 +9,6 @@ member:
 
 session:
   merciful_reconnect: true
-  implicit_hosting: true
   cookie:
     # needed for legacy API
     enabled: false
@@ -22,3 +21,7 @@ chat:
 
 filetransfer:
   enabled: false
+
+server:
+  bind: "0.0.0.0:8080"
+  static: "/var/www"

unikernels/unikraft-cu/wrapper.sh

@@ -52,7 +52,16 @@ ncat \
 if [[ "${ENABLE_WEBRTC:-}" == "true" ]]; then
   # use webrtc
   echo "✨ Starting neko (webrtc server)."
-  /usr/bin/neko serve --server.static /var/www --server.bind 0.0.0.0:8080 >&2
+  if [[ "${ENABLE_READONLY_VIEW:-}" == "true" ]]; then
+    echo "webrtc: readonly mode."
+    /usr/bin/neko serve \
+      --session.implicit_hosting=false >&2
+  else
+    echo "webrtc: full access mode."
+    /usr/bin/neko serve \
+      --session.implicit_hosting=true >&2
+  fi
+  implicit_hosting: true
 else
   # use novnc
   ./novnc_startup.sh