Initial Commit

app/src/App.vue

@@ -0,0 +1,94 @@
+<template>
+  <div id="app">
+    <!-- Title Here -->
+    <Lyrics id="lyrics" :lyrics="lyrics"/>
+    <img id="logo" src="./assets/logo.png">
+  </div>
+</template>
+
+<script>
+import "@fontsource/lato";
+import Lyrics from './components/Lyrics.vue'
+
+let sseClient;
+
+export default {
+  name: 'App',
+  components: {
+    Lyrics
+  },
+  data () {
+    return {
+      lyrics: ""
+    }
+  },
+  mounted() {
+    sseClient = this.$sse.create();
+
+    // Catch any errors (ie. lost connections, etc.)
+    sseClient.on('error', (e) => {
+      console.error('Server threw an error or the connection was lost.', e);
+
+      // If this error is due to an unexpected disconnection, EventSource will
+      // automatically attempt to reconnect indefinitely. You will _not_ need to
+      // re-add your handlers.
+    });
+
+    // Handle messages without a specific event
+    sseClient.on('message', this.handleMessage);
+
+    sseClient.connect()
+      .then(() => {
+        console.log('Connected to SSE server.');
+      })
+      .catch((err) => {
+        // When this error is caught, it means the initial connection to the
+        // events server failed.  No automatic attempts to reconnect will be made.
+        console.error('Failed to connect to server.', err);
+      });
+  },
+  methods: {
+    handleMessage(message) {
+      if (!(this.lyrics === message)) {
+        console.log(message);
+        this.lyrics = message;
+      }
+    },
+  },
+  beforeDestroy() {
+    // Make sure to close the connection with the events server
+    // when the component is destroyed, or we'll have ghost connections!
+    sseClient.disconnect();
+
+    // Alternatively, we could have added the `sse: { cleanup: true }` option to our component,
+    // and the SSEManager would have automatically disconnected during beforeDestroy.
+  },
+}
+</script>
+
+<style>
+body {
+  background-color: #419567;
+}
+#app {
+  font-family: "Lato";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: white;
+}
+#logo {
+  position: absolute;
+  left: 25px;
+  bottom: 25px;
+  height: 100px;
+}
+#lyrics {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  margin: 0;
+}
+</style>

app/src/components/Lyrics.vue

@@ -0,0 +1,20 @@
+<template>
+  <p class="lyrics" v-html="lyrics">}</p>
+</template>
+
+<script>
+export default {
+  props: [
+    'lyrics'
+  ]
+}
+</script>
+
+<style>
+.lyrics {
+  font-size: 5em;
+  font-weight: 800;
+  text-align: center;
+  text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
+}
+</style>

app/src/main.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import VueSSE from 'vue-sse';
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+Vue.use(VueSSE, {
+  url: '/lowerthirdsserver',
+});
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')