From 7dfb7fbb7648c3947ebe32381df8a4e55c1eebfd Mon Sep 17 00:00:00 2001
From: dragongoose <dragonmail14@protonmail.com>
Date: Sun, 10 Sep 2023 15:21:55 -0400
Subject: [PATCH] Refactor about page and improve icons

---
 src/components/user/AboutTab.vue | 50 ++++++++++++++++++++++++++++++++
 src/main.ts                      |  6 ++--
 src/types/Streamer.ts            |  2 +-
 src/views/ClipView.vue           | 23 +++------------
 src/views/UserView.vue           | 23 +++------------
 src/views/VodView.vue            | 23 +++------------
 vite.config.ts                   |  3 ++
 7 files changed, 70 insertions(+), 60 deletions(-)
 create mode 100644 src/components/user/AboutTab.vue

diff --git a/src/components/user/AboutTab.vue b/src/components/user/AboutTab.vue
new file mode 100644
index 0000000..0f1bb70
--- /dev/null
+++ b/src/components/user/AboutTab.vue
@@ -0,0 +1,50 @@
+<script lang="ts">
+import { getSetting } from '@/settingsManager'
+import type { Social } from '@/types';
+import type { PropType } from 'vue';
+
+export default {
+    props: {
+        socials: {
+            type: Object as PropType<Social[]>
+        },
+        about: {
+            type: String
+        }
+    },
+    methods: {
+        getSetting,
+        getIconName(iconType: string) {
+            console.log(iconType)
+            const icons = ["Twitter", "instagram", "discord", "youtube", "tiktok", "reddit"]
+            if (icons.includes(iconType)) {
+                return "bi-" + iconType
+            } else {
+                return "bi-link-45deg"
+            }
+        }   
+    }
+}
+</script>
+
+<template>
+    <div v-if="getSetting('streamerAboutSectionVisible')" class="bg-ctp-mantle mt-1 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">{{ $t('streamer.about') }}</span>
+        </div>
+
+        <p class="mb-5">{{ about || "No about provided" }}</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-if="socials" v-for="link in socials" :key="link.url">
+                <a :href="link.url" class="text-white hover:text-gray-400 mr-4 flex">
+                    <v-icon :name="getIconName(link.type)"  class="w-6 h-6 mr-1"></v-icon>
+                    <span>{{ link.name }}</span>
+                </a>
+            </li>
+            <p v-else> No socials provided </p>
+        </ul>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index d49c8e5..327328c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -24,13 +24,14 @@ import {
   IoSearchOutline,
   BiHeadphones,
   BiCameraVideoFill,
-  IoLink,
+  BiLink45Deg,
   FaCircleNotch,
   BiTwitter,
   BiInstagram,
   BiDiscord,
   BiYoutube,
   BiTiktok,
+  BiReddit,
   BiHeartFill,
   IoPerson
 } from 'oh-vue-icons/icons'
@@ -39,13 +40,14 @@ addIcons(
   IoSearchOutline,
   BiHeadphones,
   BiCameraVideoFill,
-  IoLink,
+  BiLink45Deg,
   FaCircleNotch,
   BiTwitter,
   BiInstagram,
   BiDiscord,
   BiYoutube,
   BiTiktok,
+  BiReddit,
   BiHeartFill,
   IoPerson
 )
diff --git a/src/types/Streamer.ts b/src/types/Streamer.ts
index 6d062e9..f77fd0a 100644
--- a/src/types/Streamer.ts
+++ b/src/types/Streamer.ts
@@ -1,5 +1,5 @@
 export interface Social {
-  type: string | null
+  type: string
   name: string
   url: string
 }
diff --git a/src/views/ClipView.vue b/src/views/ClipView.vue
index 077e5b6..71de223 100644
--- a/src/views/ClipView.vue
+++ b/src/views/ClipView.vue
@@ -7,6 +7,7 @@ import TwitchChat from '@/components/TwitchChat.vue'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 import FollowButton from '@/components/FollowButton.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
+import AboutTab from '@/components/user/AboutTab.vue'
 
 import type { Video } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
@@ -71,7 +72,8 @@ export default {
     TwitchChat,
     ErrorMessage,
     FollowButton,
-    LoadingScreen
+    LoadingScreen,
+    AboutTab
   },
   methods: {
     truncate,
@@ -131,24 +133,7 @@ export default {
       </div>
 
       <!-- ABOUT TAB -->
-      <div class="bg-ctp-mantle mt-1 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">{{ $t('streamer.about') }}</span>
-        </div>
-
-        <p class="mb-5">{{ data.streamer.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.streamer.socials" :key="link.url">
-            <a :href="link.url" class="text-white hover:text-gray-400 mr-4">
-              <v-icon :name="`bi-${link.type}`" class="w-6 h-6 mr-1"></v-icon>
-              <span>{{ link.name }}</span>
-            </a>
-          </li>
-        </ul>
-      </div>
+      <about-tab :socials="data.streamer.socials" :about="data.streamer.about"></about-tab>     
     </div>
 
     <!--
diff --git a/src/views/UserView.vue b/src/views/UserView.vue
index 7e3641d..a2a0d5d 100644
--- a/src/views/UserView.vue
+++ b/src/views/UserView.vue
@@ -9,6 +9,7 @@ import FollowButton from '@/components/FollowButton.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
 import VideoTab from '@/components/user/VideoTab.vue'
 import AudioPlayer from '@/components/AudioPlayer.vue'
+import AboutTab from '@/components/user/AboutTab.vue'
 
 import type { StreamerData } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
@@ -66,7 +67,8 @@ export default {
     FollowButton,
     LoadingScreen,
     VideoTab,
-    AudioPlayer
+    AudioPlayer,
+    AboutTab
   },
   methods: {
     truncate,
@@ -170,24 +172,7 @@ export default {
       <video-tab class="mb-4"></video-tab>
 
       <!-- ABOUT TAB -->
-      <div v-if="getSetting('streamerAboutSectionVisible')" class="bg-ctp-mantle mt-1 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">{{ $t('streamer.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" :key="link.url">
-            <a :href="link.url" class="text-white hover:text-gray-400 mr-4">
-              <v-icon :name="`bi-${link.type}`" class="w-6 h-6 mr-1"></v-icon>
-              <span>{{ link.name }}</span>
-            </a>
-          </li>
-        </ul>
-      </div>
+      <about-tab :socials="data.socials" :about="data.about"></about-tab>
     </div>
 
     <twitch-chat
diff --git a/src/views/VodView.vue b/src/views/VodView.vue
index b7c2cec..adcdaf8 100644
--- a/src/views/VodView.vue
+++ b/src/views/VodView.vue
@@ -7,6 +7,7 @@ import TwitchChat from '@/components/TwitchChat.vue'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 import FollowButton from '@/components/FollowButton.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
+import AboutTab from '@/components/user/AboutTab.vue'
 
 import type { Video } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
@@ -58,7 +59,8 @@ export default {
     TwitchChat,
     ErrorMessage,
     FollowButton,
-    LoadingScreen
+    LoadingScreen,
+    AboutTab
   },
   methods: {
     truncate,
@@ -119,24 +121,7 @@ export default {
       </div>
 
       <!-- ABOUT TAB -->
-      <div v-if="getSetting('streamerAboutSectionVisible')" class="bg-ctp-mantle mt-1 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">{{ $t('streamer.about') }}</span>
-        </div>
-
-        <p class="mb-5">{{ data.streamer.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.streamer.socials" :key="link.url">
-            <a :href="link.url" class="text-white hover:text-gray-400 mr-4">
-              <v-icon :name="`bi-${link.type}`" class="w-6 h-6 mr-1"></v-icon>
-              <span>{{ link.name }}</span>
-            </a>
-          </li>
-        </ul>
-      </div>
+      <about-tab :socials="data.streamer.socials" :about="data.streamer.about"></about-tab>
     </div>
 
     <twitch-chat
diff --git a/vite.config.ts b/vite.config.ts
index c5f01e6..d264cdc 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -28,6 +28,9 @@ export default defineConfig({
   build: {
     cssCodeSplit: true
   },
+  optimizeDeps: {
+    exclude: ["oh-vue-icons/icons"]
+  },
   envPrefix: 'SAFETWITCH_',
 })