Server selection, search on mobile works

src/App.vue

@@ -7,49 +7,55 @@ import MobileLayout from './components/MobileLayout.vue'
 import DesktopLayout from './components/DesktopLayout.vue'
 import WelcomeReveal from './components/WelcomeReveal.vue'
 
-const router=useRouter()
+const router = useRouter()
 
-function resizeBrowserHandler (e) {
-    is_small.value = (e.target.innerWidth < 768)
-}
-
-const is_small = ref(window.innerWidth < 768)
 const state = ref({
-'search': {'searchTerm': '', 'searchResults': []},
+    'search': {'searchTerm': '', 'searchResults': []},
-'queue': [ ],
+    'queue': [ ],
-'room': useRoute().params.room,
+    'room': useRoute().params.room,
-'name': undefined,
+    'name': undefined,
-'joined': false
+    'joined': false,
+    'server': window.location.protocol + "//" + window.location.host + "/",
+    'socket': undefined, 
+    'is_small': window.innerWidth < 768
 })
 
-onMounted(() => {
+onMounted(() => { window.addEventListener("resize", (e) => { state.value.is_small = (e.target.innerWidth < 768) }) } )
-  window.addEventListener("resize", resizeBrowserHandler)
-})
 
-function setRoomCode(room) {
+function setRoomCode(room) { state.value.room = room }
-state.value.room = room
+function setName(name) { state.value.name = name }
-}
+function setServer(server) { state.value.server = server }
-
+function setSearchTerm(searchTerm) { state.value.search.searchTerm = searchTerm }
-function setName(name) {
-state.value.name = name
-}
-
-function updateSearchTerm(val) {
-state.value.search.searchTerm = val
-}
-
-const socket = io()
 
 function search() {
-  socket.emit("search", {"query": state.value.search.searchTerm })
+  state.socket.emit("search", {"query": state.value.search.searchTerm })
 }
 
 function append(entry) {
-  socket.emit("append", {"id": entry.id, "performer": state.value.name, "source": entry.source })
+  state.socket.emit("append", {"id": entry.id, "performer": state.value.name, "source": entry.source })
+}
+
+function connect() {
+  state.socket = io(state.value.server)
+  console.log(state.socket)
+  registerSocketEvents(state.socket)
+}
+
+function registerSocketEvents(socket) {
+    socket.on("search-results", (results) => {
+      state.value.search.searchResults = results
+    })
+
+    socket.on("connect", () => { joinRoom() })
+
+    socket.on("state", (val) => {
+      state.value.queue=val.queue
+      state.value.recent=val.recent
+    })
 }
 
 function joinRoom() {
-  socket.emit("register-web", {"room": state.value.room}, (response) => {
+    state.socket.emit("register-web", {"room": state.value.room}, (response) => {
     if(response === true) {
       state.value.joined = true
       router.push({name: "room", params: {room: state.value.room}})
@@ -58,21 +64,6 @@ function joinRoom() {
     }
   })
 }
-
-socket.on("search-results", (results) => {
-  state.value.search.searchResults = results
-})
-
-socket.on("connect", () =>
-  { 
-  joinRoom()
-  }
-  )
-
-socket.on("state", (val) => {
-  state.value.queue=val.queue
-  state.value.recent=val.recent
-})
 </script>
 
 <script>
@@ -81,9 +72,9 @@ socket.on("state", (val) => {
 <template>
 <div class="page">
     <div class="row" id="main-content">
-      <MobileLayout v-show="is_small" :state="state" @update:searchTerm="updateSearchTerm" />
+      <MobileLayout v-show="state.is_small" :state="state" @update:searchTerm="setSearchTerm" @search="search" @append="append" />
-      <DesktopLayout v-show="!is_small" :state="state" @update:searchTerm="updateSearchTerm" @search="search" @append="append" />
+      <DesktopLayout v-show="!state.is_small" :state="state" @update:searchTerm="setSearchTerm" @search="search" @append="append" />
-      <WelcomeReveal v-if="!state.joined" :room="state.room" @connect="joinRoom" @update:room="setRoomCode" @update:name="setName" />
+      <WelcomeReveal v-if="!state.joined" :room="state.room" :server="state.server" @connect="connect" @update:room="setRoomCode" @update:name="setName" @update:server="setServer" />
     </div>
   </div>
 </template>

src/components/MobileLayout.vue

@@ -5,7 +5,7 @@ import RecentTab from './RecentTab.vue'
 import TabHeader from './TabHeader.vue'
 
 const props = defineProps(['state']);
-const emit = defineEmits(['update:searchTerm', 'search'])
+const emit = defineEmits(['update:searchTerm', 'search', 'append' ])
 
 </script>
 
@@ -18,7 +18,7 @@ const emit = defineEmits(['update:searchTerm', 'search'])
             <TabHeader link="#recent-list" icon="fa-history" />
         </div>
         <div class="tabs-container" data-tabs-content="main-tab">
-          <SearchTab :search="state.search" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')"/>
+          <SearchTab :search="state.search" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)"/>
           <QueueTab :queue="state.queue" />
           <RecentTab :recent="state.recent" />
         </div>

src/components/SearchBar.vue

@@ -5,7 +5,15 @@ const emit = defineEmits(['update:searchTerm', 'search'])
 
 <template>
     <div class="input-group">
-        <input id="search-query" class="input-group-field" type="search" placeholder="Search term or YouTube link (https://www.youtube.com/watch?v=...)" :value='searchTerm' @input="$emit('update:searchTerm', $event.target.value)" @keyup.enter="$emit('search')" />
+        <input 
+            id="search-query" 
+            class="input-group-field" 
+            type="search" 
+            placeholder="Search term or YouTube link (https://www.youtube.com/watch?v=...)" 
+            :value='searchTerm' 
+            @input="$emit('update:searchTerm', $event.target.value)" 
+            @keyup.enter="$emit('search')" 
+        />
         <div class="input-group-button">
             <button class="button" @click="$emit('search')"><font-awesome-icon icon="fa-solid fa-magnifying-glass" /></button>
         </div>

src/components/SearchTab.vue

@@ -3,13 +3,13 @@ import SearchBar from './SearchBar.vue'
 import SearchResults from './SearchResults.vue'
 
 const props = defineProps(['search']);
-const emit = defineEmits(['update:searchTerm', 'search'])
+const emit = defineEmits(['update:searchTerm', 'search', 'append'])
 </script>
 
 <template>
 <div class="tabs-panel is-active" id="simplesearch">
     <div class="vsplit">
-      <SearchBar :searchTerm="search.searchTerm" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" />
+      <SearchBar :searchTerm="search.searchTerm" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)" />
       <SearchResults :searchResults="search.searchResults" />
     </div>
 </div>

src/components/WelcomeReveal.vue

@@ -2,8 +2,8 @@
 import { onMounted, onBeforeUnmount } from 'vue'
 import $ from 'jquery'
 
-const emits = defineEmits(['connect', 'update:room', 'update:name'])
+const emits = defineEmits(['connect', 'update:room', 'update:name', 'update:server'])
-const props = defineProps(['room'])
+const props = defineProps(['room', 'server'])
 
 onMounted(() => {
   $(document).foundation();
@@ -23,6 +23,11 @@ onBeforeUnmount(() => {
 
   <div class="grid-container">
     <div class="grid-x grid-padding-x">
+      <div class="medium-12 cell">
+        <label>Syng server
+          <input type="text" :value="server" @input="$emit('update:server', $event.target.value)">
+        </label>
+      </div>
       <div class="medium-6 cell">
         <label>Room code
           <input type="text" :value="room" @input="$emit('update:room', $event.target.value)" placeholder="ABCD">
@@ -35,9 +40,6 @@ onBeforeUnmount(() => {
       </div>
     </div>
   </div>
-  <button class="button" @click="$emit('connect')">Connect</button>
+  <button class="button expanded" @click="$emit('connect')">Connect</button>
-<button class="close-button" data-close aria-label="Close reveal" type="button">
-  <span aria-hidden="true">&times;</span>
-</button>
 </div>
 </template>