feat: cleanup and rework audio system

client/src/App.vue

@@ -3,7 +3,8 @@
     <div id="nav">
       <div class="nav-item toggle-button" @click="toggleFullScreen">Toggle Full Screen</div> |
       <router-link to="/">Camera</router-link> |
-      <router-link to="/control">Control</router-link>
+      <router-link to="/control">Control</router-link> |
+      <router-link to="/sounds">Sounds</router-link>
     </div>
     <router-view/>
   </div>

client/src/main.js

@@ -1,11 +1,12 @@
 import Vue from 'vue';
 import VueSocketIO from 'vue-socket.io';
+import SocketIO from 'socket.io-client';
 import App from './App.vue';
 import router from './router';
 
 Vue.use(new VueSocketIO({
   debug: true,
-  connection: `${window.location.protocol}//${window.location.host}`,
+  connection: SocketIO(`${window.location.protocol}//${window.location.host}`),
   options: {
     transport: 'websocket',
   },

client/src/router/index.js

@@ -18,6 +18,11 @@ const routes = [
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "control" */ '../views/Control.vue'),
   },
+  {
+    path: '/sounds',
+    name: 'Sounds',
+    component: () => import(/* webpackChunkName: "sounds" */'../views/SoundBoard.vue'),
+  },
 ];
 
 const router = new VueRouter({

client/src/views/SoundBoard.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="sounds">
+    <div :key="`sound-${sound.name}`" class="sound" v-for="sound in sounds">
+      <h2 @click="emitSound(sound.name)">{{ sound.name }}</h2>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'SoundBoard',
+  components: {
+  },
+  data() {
+    return {
+      sounds: [],
+    };
+  },
+  mounted() {
+    axios.get('/api/sounds')
+      .then((response) => {
+        this.sounds = response.data;
+      });
+  },
+  methods: {
+    emitSound(soundName) {
+      this.$socket.emit('playSound', soundName);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>