add cast query param.

README.md

@@ -39,6 +39,7 @@ For n.eko room management software visit https://github.com/m1k1o/neko-rooms.
 - Added ARM-based images, for Raspberry Pi support (by @mbattista).
 - Added simple language picker.
 - Added `?usr=<display-name>` that will prefill username. This allows creating auto-join links.
+- Added `?cast=1` that will hide all control and show only video.
 
 ### Bugs
 - Fixed minor gst pipeline bug.

client/src/app.vue

@@ -5,13 +5,13 @@
     </template>
     <template v-else>
       <main class="neko-main">
-        <div class="header-container">
+        <div v-if="!hideControls" class="header-container">
           <neko-header />
         </div>
         <div class="video-container">
-          <neko-video ref="video" />
+          <neko-video ref="video" :hideControls="hideControls" />
         </div>
-        <div class="room-container">
+        <div v-if="!hideControls" class="room-container">
           <neko-members />
           <div class="room-menu">
             <div class="settings">
@@ -26,10 +26,16 @@
           </div>
         </div>
       </main>
-      <neko-side v-if="side" />
+      <neko-side v-if="!hideControls && side" />
       <neko-connect v-if="!connected" />
       <neko-about v-if="about" />
-      <notifications group="neko" position="top left" :ignoreDuplicates="true" style="top: 50px;pointer-events: none" />
+      <notifications
+        v-if="!hideControls"
+        group="neko"
+        position="top left"
+        style="top: 50px; pointer-events: none"
+        :ignoreDuplicates="true"
+      />
     </template>
   </div>
 </template>
@@ -137,7 +143,7 @@
 </style>
 
 <script lang="ts">
-  import { Vue, Component, Ref } from 'vue-property-decorator'
+  import { Vue, Component, Ref, Watch } from 'vue-property-decorator'
 
   import Connect from '~/components/connect.vue'
   import Video from '~/components/video.vue'
@@ -168,6 +174,16 @@
   export default class extends Vue {
     @Ref('video') video!: Video
 
+    get hideControls() {
+      return !!new URL(location.href).searchParams.get('cast')
+    }
+
+    @Watch('hideControls', { immediate: true })
+    onHideControls() {
+      this.$accessor.video.setMuted(false)
+      this.$accessor.settings.setSound(false)
+    }
+
     get about() {
       return this.$accessor.client.about
     }

client/src/components/video.vue

@@ -26,7 +26,7 @@
         </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="onResolution" class="fas fa-desktop"></i></li>
         <li class="request-control">
@@ -36,7 +36,7 @@
           />
         </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="onClipboard" class="fas fa-clipboard"></i>
         </li>
@@ -183,7 +183,7 @@
 </style>
 
 <script lang="ts">
-  import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
+  import { Component, Ref, Watch, Vue, Prop } from 'vue-property-decorator'
   import ResizeObserver from 'resize-observer-polyfill'
 
   import Emote from './emote.vue'
@@ -211,6 +211,8 @@
     @Ref('resolution') readonly _resolution!: any
     @Ref('clipboard') readonly _clipboard!: any
 
+    @Prop(Boolean) readonly hideControls = false
+
     private keyboard = GuacamoleKeyboard()
     private observer = new ResizeObserver(this.onResise.bind(this))
     private focused = false