[WIP] Added a waiting room

src/App.vue

@@ -9,32 +9,34 @@ import DesktopLayout from './components/DesktopLayout.vue'
 import WelcomeReveal from './components/WelcomeReveal.vue'
 import GetUserName from './components/GetUserName.vue'
 import Footer from './components/Footer.vue'
+import AlreadyQueued from './components/AlreadyQueued.vue'
 
 const router = useRouter()
 
 const state = ref({
     'search': {'searchTerm': '', 'searchResults': []},
     'queue': [ ],
+    'waiting_room': [ ],
     'room': useRoute().params.room,
-    'name': undefined,
+    'name': null,
     'joined': false,
     'server': window.location.protocol + "//" + window.location.host + "/",
-    'socket': undefined, 
+    'socket': null, 
     'is_small': window.innerWidth < 768,
     'admin': false,
-    'secret': undefined,
+    'secret': null,
-    'current_entry': undefined,
+    'current_entry': null,
-    'current_name': undefined,
+    'current_name': null,
     'searching': false,
     'last_msg': "",
-    'join_msg': undefined,
+    'join_msg': null,
-    'uid': undefined
+    'uid': null
 })
 
 onMounted(() => { 
   window.addEventListener("resize", (e) => { state.value.is_small = (e.target.innerWidth < 768) });
   $(document).foundation();
-  if(localStorage.name && localStorage.name != "undefined"){ state.value.name = localStorage.name }
+  if(localStorage.name && localStorage.name != "null"){ state.value.name = localStorage.name }
   if(localStorage.server){ state.value.server = localStorage.server }
   if(!(state.value.room)) {
       if(localStorage.room){ state.value.room = localStorage.room }
@@ -75,31 +77,75 @@ function search() {
 }
 
 function append(entry) {
-  _append(entry, state.value.name) 
+    checked_append_with_name(entry, state.value.name) 
-  }
+}
-function _append(entry, name) {
+function checked_append_with_name(entry, name) {
-  if(name == "" || name == undefined) {
+    console.log("checked_append_with_name")
-    state.value.current_entry = entry
+    console.log(entry)
-    state.value.current_name = ""
+    console.log(name)
-    $("#getusername").foundation("open")
+    if(name == "" || name == null) {
+        state.value.current_entry = entry;
+        state.value.current_name = "";
+        $("#getusername").foundation("open");
     } else {
-      $("#getusername").foundation("close")
+        $("#getusername").foundation("close");
-      state.value.current_entry = undefined
+
-      state.value.current_name = undefined
+        var in_queue = false;
-      state.socket.emit("append", {"ident": entry.ident, "performer": name, "source": entry.source, "uid": state.value.uid })
+        for (const entry of state.value.queue) {
-      $("#queue-tab-title").click();
+            if(entry.uid == state.value.uid) { 
+                in_queue = true;
             }
+        }
+
+        if(in_queue) {
+            $("#alreadyqueued").foundation("open");
+        } else {
+            raw_append(entry.ident, name, entry.source, state.value.uid);
+        }
+    }
+}
+
+function raw_append(ident, name, source, uid) {
+    $("#getusername").foundation("close");
+    $("#alreadyqueued").foundation("close");
+
+    state.value.current_name = null;
+    state.value.current_entry = null;
+    state.socket.emit("append", {"ident": ident, "performer": name, "source": source, "uid": uid });
+    $("#queue-tab-title").click();
+}
+
+function wait_append(ident, name, source, uid) {
+    $("#getusername").foundation("close");
+    $("#alreadyqueued").foundation("close");
+
+    state.value.current_name = null;
+    state.value.current_entry = null;
+    console.log(name)
+    state.socket.emit("waiting-room-append", {"ident": ident, "performer": name, "source": source, "uid": uid });
+    $("#queue-tab-title").click();
 }
 
 function close_name() {
   $("#getusername").foundation("close")
-  state.value.current_entry = undefined
+  state.value.current_entry = null
-  state.value.current_name = undefined
+  state.value.current_name = null
+}
+
+function close_already_queued() {
+    $("#alreadyqueued").foundation("close");
+    state.value.current_entry = null;
+    state.value.current_name = null;
 }
 
 function connect() {
-  if(!state.value.uid || state.value.uid == "undefined") {
+  if(!state.value.uid || state.value.uid == "null") {
-    state.value.uid = crypto.randomUUID()
+    if(isSecureContext) {
+    state.value.uid = crypto.randomUUID();
+    } else {
+        console.log("Insecure connection detected, user ids may not be unique");
+        state.value.uid = Math.random();
+    }
   }
   registerSocketEvents(state.socket)
 }
@@ -130,6 +176,7 @@ function registerSocketEvents() {
     state.socket.on("state", (val) => {
       state.value.queue=val.queue
       state.value.recent=val.recent
+      state.value.waiting_room = val.waiting_room
     })
 
     state.socket.on("msg", (response) => {        
@@ -210,9 +257,14 @@ function joinRoom() {
       :current_name="state.current_name"
       :current_entry="state.current_entry"
       @update:currentName="setCurrentName"
-      @append="_append(state.current_entry, state.current_name)"
+      @append="checked_append_with_name(state.current_entry, state.current_name)"
       @close_name="close_name"
       />
+    <AlreadyQueued
+      @append="raw_append(state.current_entry.ident, state.name ? state.name : state.current_name, state.current_entry.source, state.uid)"
+      @wait="wait_append(state.current_entry.ident, state.name ? state.name : state.current_name, state.current_entry.source, state.uid)"
+      @cancel="close_already_queued"
+      />
     <div class="reveal" id="msg" data-reveal>
       {{ state.last_msg }}
       <button class="close-button" data-close aria-label="Close modal" type="button">

src/components/DesktopLayout.vue

@@ -13,6 +13,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skip
     <SearchDesktop :search="state.search" :searching="state.searching" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)" />
     <QueueDesktop
       :queue="state.queue"
+      :waiting_room="state.waiting_room"
       :admin="state.admin"
       @skip="(uuid) => $emit('skip', uuid)"
       @moveUp="(uuid) => $emit('moveUp', uuid)"

src/components/Entry.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue'
-const props = defineProps(['admin', 'entry', 'current', 'firstStartedAt', 'offset', 'currentTime'])
+const props = defineProps(['admin', 'entry', 'current', 'firstStartedAt', 'offset', 'currentTime', 'additionalClass'])
 const emits = defineEmits(['skip', 'skipCurrent', 'moveUp'])
 
 function skip() {
@@ -18,7 +18,7 @@ const eta = computed(() =>{
   let etaSeconds = Math.round(props.offset - playBackSeconds)
   
   if (isNaN(etaSeconds)) {
-    return "error"
+    return null
     } else {
   return new Date(etaSeconds * 1000).toISOString().substring(11,19)
   }
@@ -27,13 +27,13 @@ const eta = computed(() =>{
 </script>
 
 <template>
-  <li :class="{ current: current }">
+  <li :class="[{ current: current }, additionalClass]">
       <div class="grid-x">
           <div class="cell" :class="{'small-9': admin}">
             <span class="artist">{{ entry.artist }}</span>
             <span class="title">{{ entry.title }}</span><br />
             <span class="performer">{{ entry.performer }} [{{ entry.uid }}]</span>
-            <span v-if="!current" class="eta">{{ eta }}</span>
+            <span v-if="!current && eta" class="eta">{{ eta }}</span>
           </div>
           <div v-if="admin" class="cell small-3">
                   <button class="button alert fright" @click="skip">

src/components/MobileLayout.vue

@@ -22,6 +22,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skip
           <QueueTab
             :queue="state.queue"
             :admin="state.admin"
+            :waiting_room="state.waiting_room"
             @skip="(uuid) => $emit('skip', uuid)"
             @moveUp="(uuid) => $emit('moveUp', uuid)"
             @skipCurrent="$emit('skipCurrent')"

src/components/QueueDesktop.vue

@@ -1,7 +1,7 @@
 <script setup>
 import QueueInner from './QueueInner.vue'
 
-const props = defineProps(['queue', 'admin']);
+const props = defineProps(['queue', 'waiting_room', 'admin']);
 const emits = defineEmits(['skip', 'skipCurrent', 'moveUp'])
 </script>
 
@@ -11,6 +11,7 @@ const emits = defineEmits(['skip', 'skipCurrent', 'moveUp'])
     <QueueInner
       :queue="queue"
       :admin="admin"
+      :waiting_room="waiting_room"
       @skip="(uuid) => $emit('skip', uuid)"
       @moveUp="(uuid) => $emit('moveUp', uuid)"
       @skipCurrent="$emit('skipCurrent')"

src/components/QueueInner.vue

@@ -2,7 +2,7 @@
 import { onMounted, reactive } from 'vue'
 import Entry from './Entry.vue'
 
-const props = defineProps(['queue', 'admin']);
+const props = defineProps(['queue', 'waiting_room', 'admin']);
 const emits = defineEmits(['skip', 'skipCurrent', 'moveUp'])
 
 let currentTime = reactive({time: Date.now()})
@@ -42,6 +42,37 @@ function offset(index) {
             @moveUp="(uuid) => $emit('moveUp', uuid)" 
           />
           </ul>
+          <ul id="waiting_room" class="vertical menu">
+          <li class="heading">Waiting room</li>
+          <Entry 
+            v-for="(entry, index) in waiting_room" 
+            :entry="entry" 
+            :admin="admin"
+            class="waitingRoom"
+            @skip="(uuid) => $emit('skip', uuid)" 
+            @skipCurrent="$emit('skipCurrent')"
+            @moveUp="(uuid) => $emit('moveUp', uuid)" 
+          />
+          </ul>
       </div>
   </div>
 </template>
+<style scoped>
+
+#waiting_room {
+    background: repeating-linear-gradient(
+  45deg,
+  #000000,
+  #000000 10px,
+  #004000 10px,
+  #004000 20px
+);
+  }
+#waiting_room li{
+    opacity: 0.5;
+  }
+#waiting_room .heading {
+  background: #00ff00;
+  font-weight: bold;
+}
+</style>

src/components/QueueTab.vue

@@ -1,7 +1,7 @@
 <script setup>
 import QueueInner from './QueueInner.vue'
 
-const props = defineProps(['queue', 'admin']);
+const props = defineProps(['queue', 'waiting_room', 'admin']);
 const emits = defineEmits(['skip', 'skipCurrent', 'moveUp'])
 </script>
 
@@ -10,6 +10,7 @@ const emits = defineEmits(['skip', 'skipCurrent', 'moveUp'])
     <QueueInner 
       :queue="queue" 
       :admin="admin" 
+      :waiting_room="waiting_room"
       @skip="(uuid) => $emit('skip', uuid)" 
       @moveUp="(uuid) => $emit('moveUp', uuid)" 
       @skipCurrent="$emit('skipCurrent')"