Move folder

src/components/NavbarView.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+export default {}
+</script>
+
+<template>
+  <div class="p-4 flex items-center justify-between bg-ctp-base text-white">
+    <h1 class="font-bold text-2xl">Naqvbar</h1>
+
+    <div>
+      <form class="relative">
+        <label for="searchBar" class="hidden">Search</label>
+        <v-icon
+          name="io-search-outline"
+          class="text-black absolute my-auto inset-y-0 left-2"
+        ></v-icon>
+        <input
+          type="text"
+          id="searchBar"
+          name="searchBar"
+          placeholder="Search"
+          class="rounded-md p-1 pl-8 text-black"
+        />
+      </form>
+    </div>
+
+    <ul class="inline-flex space-x-6 font-medium">
+      <router-link to="">Github</router-link>
+      <router-link to="/preferences">Preferences</router-link>
+      <router-link to="/about">About</router-link>
+    </ul>
+  </div>
+</template>

src/components/TwitchChat.vue

@@ -0,0 +1,72 @@
+<script lang="ts">
+import { ref, type Ref } from 'vue'
+
+export default {
+  props: {
+    isLive: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    },
+    channelName: {
+      type: String
+    }
+  },
+  setup(props) {
+    let messages: Ref<
+      { username: string; channel: string; message: string; messageType: string }[]
+    > = ref([])
+    let ws = new WebSocket('ws://localhost:7000')
+
+    return {
+      ws,
+      messages,
+      props
+    }
+  },
+  mounted() {
+    const chatList = this.$refs.chatList as Element
+    const chatStatusMessage = this.$refs.initConnectingStatus as Element
+
+    this.ws.onmessage = (message) => {
+      if (message.data == 'OK') {
+        chatStatusMessage.textContent = `Connected to ${this.channelName}`
+      } else {
+        this.messages.push(JSON.parse(message.data))
+        this.scrollToBottom(chatList)
+      }
+    }
+
+    this.ws.onopen = (data) => {
+      console.log(data)
+      this.ws.send('JOIN ' + this.props.channelName?.toLowerCase())
+    }
+  },
+  methods: {
+    getChat() {
+      return this.messages
+    },
+    scrollToBottom(el: Element) {
+      el.scrollTop = el.scrollHeight
+    }
+  }
+}
+</script>
+<template>
+  <div v-if="isLive" class="p-3 bg-ctp-crust rounded-lg w-full max-w-[15.625rem] flex flex-col">
+    <ul class="overflow-y-scroll h-[46.875rem]" ref="chatList">
+      <li>
+        <p ref="initConnectingStatus" class="text-gray-500 text-sm italic"> Connecting to {{ channelName }}.</p>
+      </li>
+      <li v-for="message in getChat()" :key="messages.indexOf(message)">
+        <div class="text-white inline-flex">
+          <p class="text-sm">
+            <strong class="text-ctp-pink font-bold text-sm">{{ message.username }}</strong
+            >: {{ message.message }}
+          </p>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>

src/components/VideoPlayer.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <video id="video-player" class="video-js vjs-defaultskin"></video>
+  </div>
+</template>
+<script lang="ts">
+// Importing video-js
+import videojs from 'video.js'
+import qualityLevels from 'videojs-contrib-quality-levels'
+
+videojs.registerPlugin('qualityLevels', qualityLevels)
+
+export default {
+  name: 'VideoJsPlayer',
+  props: {
+    options: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    let player: any
+    return {
+      player
+    }
+  },
+  // initializing the video player
+  // when the component is being mounted
+  mounted() {
+    this.player = videojs('video-player', this.options, () => {
+      this.player.hlsQualitySelector({ displayCurrentQuality: true })
+    })
+  }
+}
+</script>