christofsteel/syng-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implemented proper configurable kiosk mode

Browse source
This commit is contained in:
Christoph Stahl 2024-10-11 01:08:34 +02:00
parent ebd8d1c6e0
commit 36f9777e2a
3 changed files with 22 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/App.vue
View file

@ -34,7 +34,8 @@ const state = ref({
'uid': null, 'uid': null,
'double_entry': {'artist': null, 'title': null, 'reason': null}, 'double_entry': {'artist': null, 'title': null, 'reason': null},
'waiting_room_policy': null, 'waiting_room_policy': null,
'config': {} 'config': {},
'kiosk': false
}) })
onMounted(() => { onMounted(() => {
@ -73,6 +74,7 @@ function update_config(config) {
state.socket.emit("update_config", {"config": config}) state.socket.emit("update_config", {"config": config})
close_config() close_config()
} }
function setKiosk(kiosk) { state.value.kiosk = kiosk }
function search() { function search() {
var yt_checker = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/; 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> <template>
<div class="page"> <div class="page">
<div class="row" id="main-content"> <div class="row" :id="state.kiosk ? 'main-content-kiosk' : 'main-content'">
<MobileLayout <MobileLayout
v-show="state.is_small" v-show="state.is_small"
:state="state" :state="state"
@ -308,11 +310,13 @@ function joinRoom() {
:joinMsg="state.join_msg" :joinMsg="state.join_msg"
:name="state.name" :name="state.name"
:secret="state.secret" :secret="state.secret"
:kiosk="state.kiosk"
@connect="connect" @connect="connect"
@update:room="setRoomCode" @update:room="setRoomCode"
@update:name="setName" @update:name="setName"
@update:server="setServer" @update:server="setServer"
@update:secret="setSecret" @update:secret="setSecret"
@update:kiosk="setKiosk"
/> />
<GetUserName <GetUserName
:current_name="state.current_name" :current_name="state.current_name"
@ -339,7 +343,7 @@ function joinRoom() {
<Footer <Footer
:name="state.name" :name="state.name"
:admin="state.admin" :admin="state.admin"
:show_name="state.show_name" :kiosk="state.kiosk"
@update:name="setName" @update:name="setName"
@logout="emptyLocalStorageAndLogout" @logout="emptyLocalStorageAndLogout"
@config="show_config" @config="show_config"
@ -362,10 +366,15 @@ function joinRoom() {
height: 100%; height: 100%;
position: relative; position: relative;
} }
#main-content { #main-content {
height: calc(100vh - 50px); height: calc(100vh - 50px);
max-height: 100vh; max-height: 100vh;
max-width: 100vw; max-width: 100vw;
} }
#main-content-kiosk {
height: 100vh;
max-height: 100vh;
max-width: 100vw;
}
</style> </style>

4
src/components/Footer.vue
View file

@ -1,9 +1,9 @@
<script setup> <script setup>
const props = defineProps(['name', 'admin', 'show_name']) const props = defineProps(['name', 'admin', 'kiosk'])
const emits = defineEmits(['update:name', 'logout', 'config']) const emits = defineEmits(['update:name', 'logout', 'config'])
</script> </script>
<template> <template>
<footer> <footer v-if="!kiosk">
Name: <span Name: <span
class="userName" class="userName"
@keyup.enter="(evt) => evt.target.blur()" @keyup.enter="(evt) => evt.target.blur()"

9
src/components/WelcomeReveal.vue
View file

@ -2,8 +2,8 @@
import { onMounted, onBeforeUnmount } from 'vue' import { onMounted, onBeforeUnmount } from 'vue'
import $ from 'jquery' import $ from 'jquery'
const emits = defineEmits(['connect', 'update:room', 'update:name', 'update:server', 'update:secret']) const emits = defineEmits(['connect', 'update:room', 'update:name', 'update:server', 'update:secret', 'update:kiosk'])
const props = defineProps(['room', 'server', 'secret', 'name', 'joinMsg']) const props = defineProps(['room', 'server', 'secret', 'name', 'joinMsg', 'kiosk'])
onMounted(() => { onMounted(() => {
$(document).foundation(); $(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"> <input type="password" @input="$emit('update:secret', $event.target.value)" :value="secret" placeholder="Leave free, if not admin">
</label> </label>
</div> </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> </div>
</div> </div>