From 0facf85528f6043bef8cf9e8494a6d831f9d49a8 Mon Sep 17 00:00:00 2001
From: dragongoose <19649813+dragongoose@users.noreply.github.com>
Date: Fri, 17 Mar 2023 22:57:54 -0400
Subject: [PATCH] Move chat to component

---
 frontend/src/components/TwitchChat.vue | 16 ++++++++++++++++
 frontend/src/views/UserView.vue        | 16 +++++-----------
 2 files changed, 21 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/TwitchChat.vue

diff --git a/frontend/src/components/TwitchChat.vue b/frontend/src/components/TwitchChat.vue
new file mode 100644
index 0000000..99bbf39
--- /dev/null
+++ b/frontend/src/components/TwitchChat.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+    export default {
+        props: {
+            isLive: {
+                type: Boolean,
+                default() {
+                    return false;
+                }
+            }
+        },
+    }
+</script>
+<template>
+    <div v-if="isLive" class="p-3 bg-ctp-crust rounded-lg w-full max-w-xs">
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/views/UserView.vue b/frontend/src/views/UserView.vue
index 92aa062..7406865 100644
--- a/frontend/src/views/UserView.vue
+++ b/frontend/src/views/UserView.vue
@@ -3,6 +3,7 @@ import { ref, onMounted } from 'vue'
 import { useRoute } from "vue-router";
 import type { StreamerData } from '../../../server/types/scraping/Streamer'
 import VideoPlayer from '../components/VideoPlayer.vue'
+import TwitchChat from '../components/TwitchChat.vue'
 
 export default {
     async setup() {
@@ -49,13 +50,6 @@ export default {
                         src:
                         `http://localhost:7000/proxy/stream/${username}/hls.m3u8`,
                         type: 'application/vnd.apple.mpegurl',
-                        label: 'tt'
-                    },
-                    {
-                        src:
-                        `http://localhost:7000/proxy/stream/${username}/hls.m3u8`,
-                        type: 'application/vnd.apple.mpegurl',
-                        label: 'dd'
                     }],
                 fluid: true
             }
@@ -63,6 +57,7 @@ export default {
     },
     components: {
         VideoPlayer,
+        TwitchChat
     },
     methods: {
         truncate(value: string, length: number) {
@@ -110,7 +105,7 @@ export default {
 
 
             <div class="w-full flex-wrap p-3">
-                <div class="inline-flex w-1/2">
+                <div class="inline-flex w-2/3">
                     <div class="w-20 h-20 relative">
                         <img :src="data.pfp" class="rounded-full border-4 p-0.5 w-auto h-20" :style="`border-color: ${data.colorHex};`">
                         <span v-if="data.isLive" class="absolute top-16 right-[1.2rem] bg-ctp-red font-bold text-sm p-1.5 py-0.5 rounded-md">LIVE</span>
@@ -125,7 +120,7 @@ export default {
                     </div>
                 </div>
 
-                <div class="inline-flex w-1/2 float-right h-full text-right">
+                <div class="inline-flex w-1/3 float-right h-full text-right">
                     <div v-if="!data.isLive" class="w-full">    
                         <p class="font-bold bg-ctp-mantle p-3 py-2 rounded-lg w-min float-right border-2 border-ctp-red">OFFLINE</p>
                     </div>
@@ -161,8 +156,7 @@ export default {
         </div>
 
 
-        <div v-if="data.isLive" class="p-3 bg-ctp-crust rounded-lg w-full">
-        </div>
+        <twitch-chat :isLive="data.isLive"></twitch-chat>
     </div>
 
 </template>