hide buttons in cast mode

client/src/app.vue

@@ -1,17 +1,17 @@
 <template>
-  <div id="neko" :class="[!hideControls && side ? 'expanded' : '']">
+  <div id="neko" :class="[!videoOnly && side ? 'expanded' : '']">
     <template v-if="!$client.supported">
       <neko-unsupported />
     </template>
     <template v-else>
       <main class="neko-main">
-        <div v-if="!hideControls" class="header-container">
+        <div v-if="!videoOnly" class="header-container">
           <neko-header />
         </div>
         <div class="video-container">
           <neko-video ref="video" :hideControls="hideControls" @control-attempt="controlAttempt" />
         </div>
-        <div v-if="!hideControls" class="room-container">
+        <div v-if="!videoOnly" class="room-container">
           <neko-members />
           <div class="room-menu">
             <div class="settings">
@@ -26,11 +26,11 @@
           </div>
         </div>
       </main>
-      <neko-side v-if="!hideControls && side" />
+      <neko-side v-if="!videoOnly && side" />
       <neko-connect v-if="!connected" />
       <neko-about v-if="about" />
       <notifications
-        v-if="!hideControls"
+        v-if="!videoOnly"
         group="neko"
         position="top left"
         style="top: 50px; pointer-events: none"
@@ -176,10 +176,22 @@
 
     shakeKbd = false
 
-    get hideControls() {
+    get isCastMode() {
       return !!new URL(location.href).searchParams.get('cast')
     }
 
+    get isEmbedMode() {
+      return !!new URL(location.href).searchParams.get('embed')
+    }
+
+    get hideControls() {
+      return this.isCastMode
+    }
+
+    get videoOnly() {
+      return this.isCastMode || this.isEmbedMode
+    }
+
     @Watch('hideControls', { immediate: true })
     onHideControls(enabled: boolean) {
       if (enabled) {

client/src/components/video.vue

@@ -30,17 +30,17 @@
         </div>
         <div ref="aspect" class="player-aspect" />
       </div>
-      <ul v-if="!fullscreen" class="video-menu top">
+      <ul v-if="!fullscreen && !hideControls" class="video-menu top">
         <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 :class="hideControls || 'request-control'">
+        <li v-if="!this.implicitHosting" class="request-control">
           <i
             :class="[hosted && !hosting ? 'disabled' : '', !hosted && !hosting ? 'faded' : '', 'fas', 'fa-keyboard']"
             @click.stop.prevent="toggleControl"
           />
         </li>
       </ul>
-      <ul v-if="!fullscreen" class="video-menu bottom">
+      <ul v-if="!fullscreen && !hideControls" class="video-menu bottom">
         <li v-if="hosting && (!clipboard_read_available || !clipboard_write_available)">
           <i @click.stop.prevent="openClipboard" class="fas fa-clipboard"></i>
         </li>
@@ -107,13 +107,7 @@
           }
 
           &.request-control {
-            display: none;
+            display: inline-block;
-          }
-
-          @media (max-width: 768px) {
-            &.request-control {
-              display: inline-block;
-            }
           }
 
           &:last-child {

docs/getting-started/README.md

@@ -230,6 +230,7 @@ Note, currently only browser GPU acceleration is supported, not encoding.
   - Adding `?pwd=<password>` will prefill password.
   - Adding `?usr=<display-name>` will prefill username.
   - Adding `?cast=1` will hide all control and show only video.
+  - Adding `?embed=1` will hide most additional components and show only video.
   - e.g. `http(s)://<URL:Port>/?pwd=neko&usr=guest&cast=1`
 
 ### Screen size