From 95f3f378c48102dc40c4d1819d7723063d4e47cf Mon Sep 17 00:00:00 2001
From: dragongoose <19649813+dragongoose@users.noreply.github.com>
Date: Tue, 14 Mar 2023 21:30:40 -0400
Subject: [PATCH] General fixes and prepare for chat

---
 frontend/src/views/UserView.vue | 103 ++++++++++++++++----------------
 1 file changed, 53 insertions(+), 50 deletions(-)

diff --git a/frontend/src/views/UserView.vue b/frontend/src/views/UserView.vue
index 8c4439e..4192b24 100644
--- a/frontend/src/views/UserView.vue
+++ b/frontend/src/views/UserView.vue
@@ -46,7 +46,7 @@ export default {
         }
     },
     components: {
-        VideoPlayer
+        VideoPlayer,
     },
     methods: {
         truncate(value: string, length: number) {
@@ -55,8 +55,8 @@ export default {
             } else {
                 return value;
             }
-        }
-    }
+        },
+    },
 }
 
 </script>
@@ -84,66 +84,69 @@ export default {
         </div>
     </div>
 
-    <div v-else class="flex flex-wrap mx-auto bg-ctp-crust p-6 rounded-lg max-w-prose text-white">
+    <div v-else class="w-full inline-flex space-x-4 justify-center p-4">
+        <div class="flex flex-wrap bg-ctp-crust p-6 rounded-lg max-w-prose min-w-[65ch] text-white">
+            <div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
+                <video-player
+                    :src="`http://localhost:7000/proxy/stream/${data.username}/hls.m3u8`"
+                    poster="/your-path/poster.jpg" controls :loop="true" :volume="0.6" :autoplay="'muted'" :fluid="true" />
+            </div>
 
 
-        <div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
-            <video-player
-                src="https://video-weaver.jfk04.hls.ttvnw.net/v1/playlist/CpwF74ZwzfoheHjVAIg7VWZzSnB9W3FgXzezhTA3ye7QTA9aJjprgctuMZwlTRQ1PUqoltrgVBu7SJ3vJfALlIkNYAhuYjZMnFaFnEqzv-jIH0gXW-AWgu3f-vDbarfun78h4vUHecELAqyJM_c6IEDM2b5uHCE1ZfSnZnk2ZV8XHyzbwUz8Uc-e1YM1DyCpGYHrtz_Z-0TR-ordiDzHJ8lFCzn8F8zbbePoFMD2kex4f_6neLyuAfbh2jLZj6JNPt6o63fP2N9WiHxlRT75ACUihbBbI2llL-UCdpA_lXyTWFUud28R2wJGCqt8WUm-wjECnS8BINcThhPEnN_I1imGFN-CwqxqeSMpFkzA05_Q4HoP9Bu-Z4ln2UUw7ljy9OZeYcR0rM29rmKNCa5VPA4mzuAM_2al7JLiabC9t2rJvYZgklWgFaxc6UoChOU5yQsgpac_MNNNz7wIWqgjHSRL-AI4XQDIAHWZwm7GeEB5KJhxvI_8dgnnui7t9MBFU8A2h73iScGGZOmYfK3jQrIG0-kEhjBMCopu4XPv0RxSbSD9SvncTUmNer6ybUKkjXC793AC7xREE1z6xEGQfT5wbTbC2WscKQn883ShGD5XtfW5rZIenitxvNFFgM3Ttwv5FeSY0o8angPRPzexZ5fijOZ2eAmsXgrW_pN380ba4qpbrsaalJcdtysN9Da-QmCWbsjnoKMkQ_-12PwwpDYAIyWjmeW3JrvVMzClK_WV7Z70pEt6yl_9W4Qf0zt4mEyF8ghG4nxPZutSCt4HPilKLzPCLYfcuEiIlW6hZ9riNTP7jf0Yp-afDE89lYGYrj0xNh4C8LahZTNtGWKVkxRxw8w_v2lhBuvmrNJrwjs2Rwyw_EZANqi0_CnvWEMaDKw-7_jk6XNkCi0NtyABKgl1cy1lYXN0LTIwgQY.m3u8"
-                poster="/your-path/poster.jpg" controls :loop="true" :volume="0.6" :autoplay="'muted'" :fluid="true" />
-        </div>
+            <div class="w-full flex-wrap p-3">
+                <div class="inline-flex w-1/2">
+                    <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>
+                    </div>
 
-
-        <div class="inline-flex justify-between">
-            <div class="flex">
-                <div class="container w-28 h-28 relative">
-                    <img :src="data.pfp" class="rounded-full border-4 border-ctp-teal p-0.5 w-auto h-28">
-                    <span v-if="data.isLive" class="absolute bottom-0 right-[1.8rem] bg-ctp-red font-bold p-2.5 py-0.5 rounded-md">LIVE</span>
-                </div>
-
-                <div class="ml-3">
-                    <h1 class="text-4xl font-bold mb-3">{{ data.username }}</h1>
-                    <h1 v-if="!data.stream" class="font-bold text-md self-end">{{ data.followersAbbv }} Followers</h1>
-                    <div v-else class="w-[12rem]">
-                        <p class="text-md font-bold self-end"> {{ truncate(data.stream.title, 200) }} </p>
+                    <div class="ml-3 content-between">
+                        <h1 class="text-4xl font-bold">{{ data.username }}</h1>
+                        <h1 v-if="!data.stream" class="font-bold text-md self-end ">{{ data.followersAbbv }} Followers</h1>
+                        <div v-else class="w-[12rem]">
+                            <p class="text-sm font-bold text-gray-200 self-end"> {{ truncate(data.stream.title, 75) }} </p>
+                        </div>
                     </div>
                 </div>
+
+                <div class="inline-flex w-1/2 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>
+                    <div v-else class="w-full">
+                        <ul class="text-xs font-bold text-right space-x-1 space-y-1 overflow-y-auto">
+                            <li v-for="tag in data.stream.tags" class="inline-flex bg-ctp-mantle p-1.5 px-2 rounded-md">
+                                {{ tag }}
+                            </li>
+                        </ul>
+                    </div>
+
+                </div>
             </div>
 
-
-
-            <div class="pt-5 pr-5 flex rounded-lg">
-                <span v-if="!data.isLive"
-                    class="font-bold text-sm bg-ctp-mantle border border-ctp-red p-3.5 rounded-lg">OFFLINE</span>
-                <div v-else class="justify-end">
-                    <ul class="flex font-bold flex-wrap  text-sm justify-end  float-right max-h-24 overflow-y-auto">
-                        <li v-for="tag in data.stream.tags" class="p-2.5 py-1 m-0.5 bg-ctp-mantle rounded-md inline-flex">
-                            {{ tag }}
-                        </li>
-                    </ul>
+            <div class="bg-ctp-mantle m-5 p-5 pt-3 rounded-lg w-full space-y-3">
+                <div class="inline-flex w-full">
+                    <span class="pr-3 font-bold text-3xl">About</span>
                 </div>
 
+                <p class="mb-5">{{ data.about }}</p>
+
+                <hr class="my-auto w-full bg-gray-200 rounded-full opacity-40" />
+
+                <ul class="flex font-semibold text-md justify-start flex-wrap flex-row">
+                    <li v-for="link in data.socials">
+                        <a :href="link.link" class="text-white hover:text-gray-400 mr-4">
+                            <v-icon :name="link.type ? `bi-${link.type}` : 'io-link'" class="w-6 h-6 mr-1"></v-icon>
+                            <span>{{ link.text }}</span>
+                        </a>
+                    </li>
+                </ul>
             </div>
         </div>
 
-        <div class="bg-ctp-mantle m-5 p-5 pt-3 rounded-lg w-full space-y-3">
-            <div class="inline-flex w-full">
-                <span class="pr-3 font-bold text-3xl">About</span>
-            </div>
-
-            <p class="mb-5">{{ data.about }}</p>
-
-            <hr class="my-auto w-full bg-gray-200 rounded-full opacity-40" />
-
-            <ul class="flex font-semibold text-md justify-start flex-wrap flex-row">
-                <li v-for="link in data.socials">
-                    <a :href="link.link" class="text-white hover:text-gray-400 mr-4">
-                        <v-icon :name="link.type ? `bi-${link.type}` : 'io-link'" class="w-6 h-6 mr-1"></v-icon>
-                        <span>{{ link.text }}</span>
-                    </a>
-                </li>
-            </ul>
 
+        <div v-if="data.isLive" class="p-3 bg-ctp-crust rounded-lg w-full">
         </div>
     </div>
+
 </template>