From 36f9777e2a953c1d652e882630299c76a407447c Mon Sep 17 00:00:00 2001
From: Christoph Stahl <christoph.stahl@tu-dortmund.de>
Date: Fri, 11 Oct 2024 01:08:34 +0200
Subject: [PATCH] Implemented proper configurable kiosk mode

---
 src/App.vue                      | 17 +++++++++++++----
 src/components/Footer.vue        |  4 ++--
 src/components/WelcomeReveal.vue |  9 +++++++--
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 644beea..0270625 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -34,7 +34,8 @@ const state = ref({
     'uid': null,
     'double_entry': {'artist': null, 'title': null, 'reason': null},
     'waiting_room_policy': null,
-    'config': {}
+    'config': {},
+    'kiosk': false
 })
 
 onMounted(() => { 
@@ -73,6 +74,7 @@ function update_config(config) {
     state.socket.emit("update_config", {"config": config})
     close_config()
 }
+function setKiosk(kiosk) { state.value.kiosk = kiosk }
 
 function search() {
   var yt_checker = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
@@ -278,7 +280,7 @@ function joinRoom() {
 
 <template>
 <div class="page">
-  <div class="row" id="main-content">
+  <div class="row" :id="state.kiosk ? 'main-content-kiosk' : 'main-content'">
     <MobileLayout 
         v-show="state.is_small" 
         :state="state" 
@@ -308,11 +310,13 @@ function joinRoom() {
       :joinMsg="state.join_msg"
       :name="state.name"
       :secret="state.secret"
+      :kiosk="state.kiosk"
       @connect="connect"
       @update:room="setRoomCode"
       @update:name="setName"
       @update:server="setServer"
       @update:secret="setSecret" 
+      @update:kiosk="setKiosk"
       />
     <GetUserName
       :current_name="state.current_name"
@@ -339,7 +343,7 @@ function joinRoom() {
   <Footer
     :name="state.name"
     :admin="state.admin"
-    :show_name="state.show_name"
+    :kiosk="state.kiosk"
     @update:name="setName"
     @logout="emptyLocalStorageAndLogout"
     @config="show_config"
@@ -362,10 +366,15 @@ function joinRoom() {
     height: 100%;
     position: relative;
 }
-
 #main-content {
     height: calc(100vh - 50px);
     max-height: 100vh;
     max-width: 100vw;
 }
+
+#main-content-kiosk {
+    height: 100vh;
+    max-height: 100vh;
+    max-width: 100vw;
+}
 </style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 83645e5..d0c3aed 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,9 +1,9 @@
 <script setup>
-const props = defineProps(['name', 'admin', 'show_name'])
+const props = defineProps(['name', 'admin', 'kiosk'])
 const emits = defineEmits(['update:name', 'logout', 'config'])
 </script>
 <template>
-  <footer>
+  <footer v-if="!kiosk">
     Name: <span
       class="userName"
       @keyup.enter="(evt) => evt.target.blur()"
diff --git a/src/components/WelcomeReveal.vue b/src/components/WelcomeReveal.vue
index 009966f..c4342a8 100644
--- a/src/components/WelcomeReveal.vue
+++ b/src/components/WelcomeReveal.vue
@@ -2,8 +2,8 @@
 import { onMounted, onBeforeUnmount } from 'vue'
 import $ from 'jquery'
 
-const emits = defineEmits(['connect', 'update:room', 'update:name', 'update:server', 'update:secret'])
-const props = defineProps(['room', 'server', 'secret', 'name', 'joinMsg'])
+const emits = defineEmits(['connect', 'update:room', 'update:name', 'update:server', 'update:secret', 'update:kiosk'])
+const props = defineProps(['room', 'server', 'secret', 'name', 'joinMsg', 'kiosk'])
 
 onMounted(() => {
   $(document).foundation();
@@ -54,6 +54,11 @@ onBeforeUnmount(() => {
                 <input type="password" @input="$emit('update:secret', $event.target.value)" :value="secret" placeholder="Leave free, if not admin">
               </label>
             </div>
+            <div class="medium-12 cell">
+                <label>Kiosk mode
+                  <input type="checkbox" id="kiosk" @change="$emit('update:kiosk', $event.target.checked)">
+                </label>
+              </div>
           </div>
         </div>
       </div>