From 06b77d686cba6ab6476f98bb70bf5a740648fc95 Mon Sep 17 00:00:00 2001
From: dragongoose <dragonmail14@protonmail.com>
Date: Fri, 18 Aug 2023 13:39:26 -0400
Subject: [PATCH] Lint/prettify

---
 src/assets/messageParser.ts         |  6 +-
 src/assets/qualitySelector.ts       | 10 +---
 src/components/LanguageSwitcher.vue | 11 +++-
 src/components/NavbarView.vue       | 72 ++++++++++++----------
 src/components/user/VideoTab.vue    |  4 +-
 src/mixins.ts                       | 30 +++++-----
 src/types/Chat.ts                   | 12 ++--
 src/types/VOD.ts                    |  2 +-
 src/views/CategoryView.vue          | 46 +++++++-------
 src/views/HomepageView.vue          | 26 ++++----
 src/views/SettingsView.vue          | 93 +++++++++++++++--------------
 src/views/UserView.vue              |  7 ++-
 src/views/VodView.vue               |  7 ++-
 13 files changed, 177 insertions(+), 149 deletions(-)

diff --git a/src/assets/messageParser.ts b/src/assets/messageParser.ts
index e2f7bba..77a0de0 100644
--- a/src/assets/messageParser.ts
+++ b/src/assets/messageParser.ts
@@ -60,7 +60,7 @@ export function parseMessage(messageData: any, allBadges: Badge[]): ParsedMessag
       return {
         type: 'CLEARCHAT',
         data: {
-          username: message.message.replace(/(\r\n|\n|\r)/gm, ""),
+          username: message.message.replace(/(\r\n|\n|\r)/gm, ''),
           duration
         }
       }
@@ -76,11 +76,11 @@ export function parseMessage(messageData: any, allBadges: Badge[]): ParsedMessag
 }
 
 export function parseChatHistory(messages: StreamMessage[], badges: Badge[]) {
-  let parsedMessages = []
+  const parsedMessages = []
 
   for (let i = 0; i < messages.length; i++) {
     const message = messages[i]
-    
+
     const data: ParsedMessage = {
       type: 'PRIVMSG',
       data: {
diff --git a/src/assets/qualitySelector.ts b/src/assets/qualitySelector.ts
index e35e871..3cf4eb7 100644
--- a/src/assets/qualitySelector.ts
+++ b/src/assets/qualitySelector.ts
@@ -6,12 +6,6 @@ import type { QualityLevelList, QualityLevel } from 'videojs-contrib-quality-lev
 import i18n from '@/i18n'
 import { getSetting } from '@/mixins'
 
-const getQualityFromSettings = (qualityLevels) => {
-  const settings = localStorage.getItem("settings")
-  const parsed = JSON.parse(settings)
-  return parsed.defaultQuality.selected
-}
-
 export const createQualitySelector = (player: any) => {
   const qualityLevels: QualityLevelList = player.qualityLevels()
   const MenuButton = videojs.getComponent('MenuButton')
@@ -53,7 +47,7 @@ export const createQualitySelector = (player: any) => {
         }
 
         // set quality on startup
-        const startingQuality = getSetting("defaultQuality")
+        const startingQuality = getSetting('defaultQuality')
         const id = formatedQualities.find((i) => i.name === startingQuality)?.id
         setQuality(id)
 
@@ -88,4 +82,4 @@ export const createQualitySelector = (player: any) => {
     formattedLevels.push(formatedQualities)
     updateLevels()
   })
-}
\ No newline at end of file
+}
diff --git a/src/components/LanguageSwitcher.vue b/src/components/LanguageSwitcher.vue
index 7d49b8e..97c4216 100644
--- a/src/components/LanguageSwitcher.vue
+++ b/src/components/LanguageSwitcher.vue
@@ -18,7 +18,16 @@ export default {
   setup() {
     return {
       langs: ['en-US', 'es-ES', 'nl-NL', 'pt-PT', 'fa-IR', 'he-IL', 'ru-RU', 'ko-KR'],
-      names: ['English', 'Español', 'Nederlands', 'Português', 'فارسی', 'עִבְרִית', 'Русский', '한국어']
+      names: [
+        'English',
+        'Español',
+        'Nederlands',
+        'Português',
+        'فارسی',
+        'עִבְרִית',
+        'Русский',
+        '한국어'
+      ]
     }
   },
   mounted() {
diff --git a/src/components/NavbarView.vue b/src/components/NavbarView.vue
index 4adee4d..5e1d821 100644
--- a/src/components/NavbarView.vue
+++ b/src/components/NavbarView.vue
@@ -14,44 +14,52 @@ export default {
   },
   methods: {
     toggle() {
-    	this.open = !this.open
+      this.open = !this.open
     }
   }
 }
 </script>
 
 <template>
+  <nav class="flex items-center justify-between flex-wrap p-4">
+    <div class="flex items-center flex-no-shrink text-white mr-6">
+      <router-link to="/">
+        <h1 class="font-bold text-2xl">Safe<color class="text-purple-500">Twitch</color></h1>
+      </router-link>
+    </div>
 
-    <nav class="flex items-center justify-between flex-wrap p-4">
-      <div class="flex items-center flex-no-shrink text-white mr-6">
-        <router-link to="/">
-          <h1 class="font-bold text-2xl">Safe<color class="text-purple-500">Twitch</color></h1>
-        </router-link>
+    <search-bar class="mt-4 mr-4 hidden sm:inline-block sm:mt-0"></search-bar>
+
+    <div class="text-white hidden sm:block">
+      <a
+        href="https://codeberg.org/dragongoose/safetwitch"
+        class="mt-4 mr-4 sm:inline-block sm:mt-0"
+        >{{ $t('nav.code') }}</a
+      >
+      <router-link to="/privacy" class="mt-4 mr-4 sm:inline-block sm:mt-0">{{
+        $t('nav.privacy')
+      }}</router-link>
+      <language-switcher class="mt-4 sm:inline-block sm:mt-0"></language-switcher>
+    </div>
+
+    <div class="block sm:hidden">
+      <button @click="toggle" class="flex items-center px-3 py-2">
+        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <title>Menu</title>
+          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+        </svg>
+      </button>
+    </div>
+
+    <div :class="open ? 'block' : 'hidden'" class="w-full flex-grow">
+      <div class="p-4 flex flex-col items-center space-y-5 bg-ctp-base text-white">
+        <search-bar></search-bar>
+        <ul class="inline-flex space-x-3 md:space-x-6 font-medium">
+          <a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>
+          <router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
+          <language-switcher></language-switcher>
+        </ul>
       </div>
-
-      <search-bar class="mt-4 mr-4 hidden sm:inline-block sm:mt-0"></search-bar>
-
-      <div class="text-white hidden sm:block">
-        <a href="https://codeberg.org/dragongoose/safetwitch" class="mt-4 mr-4 sm:inline-block sm:mt-0">{{ $t('nav.code') }}</a>
-        <router-link to="/privacy" class="mt-4 mr-4 sm:inline-block sm:mt-0">{{ $t('nav.privacy') }}</router-link>
-        <language-switcher class="mt-4 sm:inline-block sm:mt-0"></language-switcher>
-      </div>
-
-      <div class="block sm:hidden">
-        <button @click="toggle" class="flex items-center px-3 py-2">
-          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
-        </button>
-      </div>
-
-      <div :class="open ? 'block': 'hidden'" class="w-full flex-grow">
-        <div class="p-4 flex flex-col items-center space-y-5 bg-ctp-base text-white">
-          <search-bar></search-bar>
-          <ul class="inline-flex space-x-3 md:space-x-6 font-medium">
-            <a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>
-            <router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
-            <language-switcher></language-switcher>
-          </ul>
-        </div>
-      </div>
-    </nav>
+    </div>
+  </nav>
 </template>
diff --git a/src/components/user/VideoTab.vue b/src/components/user/VideoTab.vue
index 0130010..87cb5f9 100644
--- a/src/components/user/VideoTab.vue
+++ b/src/components/user/VideoTab.vue
@@ -5,10 +5,10 @@
 <template>
   <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.videos") }}</span>
+      <span class="pr-3 font-bold text-3xl">{{ $t('streamer.videos') }}</span>
     </div>
 
-    <h1 v-if="!shelves && status === 'error'">{{ $t("streamer.videoerror") }}</h1>
+    <h1 v-if="!shelves && status === 'error'">{{ $t('streamer.videoerror') }}</h1>
 
     <div v-else-if="shelves" class="mb-5">
       <div class="space-y-5">
diff --git a/src/mixins.ts b/src/mixins.ts
index 36596be..0d6e2a5 100644
--- a/src/mixins.ts
+++ b/src/mixins.ts
@@ -43,22 +43,22 @@ export async function getEndpoint(endpoint: string) {
 
 export function getDefaultSettings() {
   return {
-    "audioOnly": {
-        "name": "Audio Only",
-        "selected": false,
-        "type": "checkbox"
+    audioOnly: {
+      name: 'Audio Only',
+      selected: false,
+      type: 'checkbox'
     },
-    "defaultQuality": {
-        "name": "Default Quality",
-        "options": ["160p", "360p", "480p", "720p", "1080p"],
-        "selected": "480p",
-        "type": "option"
-    },
-    "chatVisible": {
-        "name": "Hide Chat",
-        "selected": false,
-        "type": "checkbox"
+    defaultQuality: {
+      name: 'Default Quality',
+      options: ['160p', '360p', '480p', '720p', '1080p'],
+      selected: '480p',
+      type: 'option'
     },
+    chatVisible: {
+      name: 'Hide Chat',
+      selected: false,
+      type: 'checkbox'
+    }
   }
 }
 
@@ -75,7 +75,7 @@ export function getSetting(key: string): boolean | string {
 }
 
 export function chatVisible() {
-  const p = getSetting("chatVisible")
+  const p = getSetting('chatVisible')
   // Flip becuase on the setting page it's
   // displayed as "Hide Chat", but the value
   // is chatVisible
diff --git a/src/types/Chat.ts b/src/types/Chat.ts
index b167226..34f23dd 100644
--- a/src/types/Chat.ts
+++ b/src/types/Chat.ts
@@ -18,13 +18,13 @@ export interface Metadata {
 }
 
 export interface StreamMessageBadge {
-	version: string
-	setId: string
+  version: string
+  setId: string
 }
 
 export interface StreamMessage {
-	message: string
-	username: string
-	color:    string
-	badges: StreamMessageBadge[]
+  message: string
+  username: string
+  color: string
+  badges: StreamMessageBadge[]
 }
diff --git a/src/types/VOD.ts b/src/types/VOD.ts
index 14017dc..85d66fa 100644
--- a/src/types/VOD.ts
+++ b/src/types/VOD.ts
@@ -15,7 +15,7 @@ export interface MinifiedStreamer {
 }
 
 export interface Video {
-  type: "vod" | "clip"
+  type: 'vod' | 'clip'
   preview: string
   game: MinifiedCategory
   duration: number
diff --git a/src/views/CategoryView.vue b/src/views/CategoryView.vue
index 0d47a42..3530b7c 100644
--- a/src/views/CategoryView.vue
+++ b/src/views/CategoryView.vue
@@ -35,34 +35,34 @@ export default {
   },
   methods: {
     async getMoreStreams() {
-        let bottomOfWindow =
-          document.documentElement.scrollTop + window.innerHeight ===
-          document.documentElement.offsetHeight
-        const streams = this.data!.streams
+      let bottomOfWindow =
+        document.documentElement.scrollTop + window.innerHeight ===
+        document.documentElement.offsetHeight
+      const streams = this.data!.streams
 
-        if (bottomOfWindow && streams) {
-          // get cursor of the last stream rendered
-          const cursor = streams[streams.length - 1].cursor
-          if (!cursor) return
+      if (bottomOfWindow && streams) {
+        // get cursor of the last stream rendered
+        const cursor = streams[streams.length - 1].cursor
+        if (!cursor) return
 
-          // get rest of streams from api
-          const resData: CategoryData = await getEndpoint(
-            `api/discover/${this.$route.params.game}?cursor=${cursor}`
-          ).catch((err) => {
-            throw err
-          })
+        // get rest of streams from api
+        const resData: CategoryData = await getEndpoint(
+          `api/discover/${this.$route.params.game}?cursor=${cursor}`
+        ).catch((err) => {
+          throw err
+        })
 
-          let lastStreamCursor = this.data!.streams[this.data!.streams.length-1].cursor
-          let newLastStreamCursor = resData.streams[resData.streams.length-1].cursor
-          if (lastStreamCursor === newLastStreamCursor) {
-            // Add "no more streams!" screen later
-            console.log("no more streams!")
-          } else {
-            for (let stream of resData.streams) {
-              this.data!.streams.push(stream)
-            }
+        let lastStreamCursor = this.data!.streams[this.data!.streams.length - 1].cursor
+        let newLastStreamCursor = resData.streams[resData.streams.length - 1].cursor
+        if (lastStreamCursor === newLastStreamCursor) {
+          // Add "no more streams!" screen later
+          console.log('no more streams!')
+        } else {
+          for (let stream of resData.streams) {
+            this.data!.streams.push(stream)
           }
         }
+      }
     },
     abbreviate
   },
diff --git a/src/views/HomepageView.vue b/src/views/HomepageView.vue
index 0de85b0..ecd0dc0 100644
--- a/src/views/HomepageView.vue
+++ b/src/views/HomepageView.vue
@@ -25,7 +25,10 @@ export default {
   methods: {
     filterSearches(toFilter: string) {
       const categories = this.$refs.categoryItem
-      const wantedTags: string[] = toFilter.toLowerCase().split(',').filter((v) => v.toLowerCase())
+      const wantedTags: string[] = toFilter
+        .toLowerCase()
+        .split(',')
+        .filter((v) => v.toLowerCase())
 
       for (let category of categories as any) {
         let tagElements = category.getElementsByTagName('span')
@@ -49,18 +52,18 @@ export default {
       }
     },
     async getNextCategory() {
-        let bottomOfWindow =
-          document.documentElement.scrollTop + window.innerHeight ===
-          document.documentElement.offsetHeight
-        if (bottomOfWindow && this.data) {
-          const cursor = this.data[this.data.length - 1].cursor
-          if (!cursor) return
-          const res = await getEndpoint('api/discover?cursor=' + cursor)
+      let bottomOfWindow =
+        document.documentElement.scrollTop + window.innerHeight ===
+        document.documentElement.offsetHeight
+      if (bottomOfWindow && this.data) {
+        const cursor = this.data[this.data.length - 1].cursor
+        if (!cursor) return
+        const res = await getEndpoint('api/discover?cursor=' + cursor)
 
-          for (let category of res) {
-            this.data.push(category)
-          }
+        for (let category of res) {
+          this.data.push(category)
         }
+      }
     }
   },
   async mounted() {
@@ -142,6 +145,5 @@ export default {
         <category-preview :category-data="category"></category-preview>
       </li>
     </ul>
-
   </div>
 </template>
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 64d6eb2..8639f79 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -2,25 +2,25 @@
 import { getDefaultSettings } from '@/mixins'
 
 export default {
-    setup() {
-        let settings
+  setup() {
+    let settings
 
-        let storedSettings = localStorage.getItem("settings")
-        if (storedSettings === null) {
-            settings = getDefaultSettings()
-        } else {
-            settings = JSON.parse(storedSettings)
-        }
+    let storedSettings = localStorage.getItem('settings')
+    if (storedSettings === null) {
+      settings = getDefaultSettings()
+    } else {
+      settings = JSON.parse(storedSettings)
+    }
 
-        return {
-            settings
-        }
-    },
-    methods: {
-        save() {
-            const settings = JSON.stringify(this.settings)
-            localStorage.setItem('settings', settings)
-        },
+    return {
+      settings
+    }
+  },
+  methods: {
+    save() {
+      const settings = JSON.stringify(this.settings)
+      localStorage.setItem('settings', settings)
+    }
     //     download() {
     //         var hiddenElement = document.createElement('a');
 
@@ -40,37 +40,42 @@ export default {
     //         this.settings = file
     //         this.save()
     //     },
-        }
-    }
+  }
+}
 </script>
 
 <template>
-    <div class="mx-auto w-[35rem] p-5 py-3 bg-ctp-crust rounded-md text-white">
-        <h1 class="font-bold text-3xl">Settings</h1>
-        <hr class="my-2">
-        <ul class="w-full space-y-1">
-            <li v-for="setting in settings">
-                <div v-if="setting.type == 'checkbox'" class="justify-between items-center flex">
-                    <label :for="setting.name">{{ setting.name }}</label>
-                    <input :name="setting.name" type="checkbox" v-model="setting.selected">
-                </div>
+  <div class="mx-auto w-[35rem] p-5 py-3 bg-ctp-crust rounded-md text-white">
+    <h1 class="font-bold text-3xl">Settings</h1>
+    <hr class="my-2" />
+    <ul class="w-full space-y-1">
+      <li v-for="setting in settings" :key="setting.type">
+        <div v-if="setting.type == 'checkbox'" class="justify-between items-center flex">
+          <label :for="setting.name">{{ setting.name }}</label>
+          <input :name="setting.name" type="checkbox" v-model="setting.selected" />
+        </div>
 
-                <div v-else-if="setting.type == 'option'" class="justify-between items-center flex">
-                    <label :for="setting.name">{{ setting.name }}</label>
-                    <select :name="setting.name" type="checkbox" v-model="setting.selected"
-                        class="text-black rounded-md h-8 p-0 pr-8 pl-2">
-                        <option v-for="option of setting.options" :value="option">
-                            {{ option }}
-                        </option>
-                    </select>
-                </div>
-            </li>
-        </ul>
+        <div v-else-if="setting.type == 'option'" class="justify-between items-center flex">
+          <label :for="setting.name">{{ setting.name }}</label>
+          <select
+            :name="setting.name"
+            type="checkbox"
+            v-model="setting.selected"
+            class="text-black rounded-md h-8 p-0 pr-8 pl-2"
+          >
+            <option v-for="option of setting.options" :key="option" :value="option">
+              {{ option }}
+            </option>
+          </select>
+        </div>
+      </li>
+    </ul>
 
-        <div class="space-x-2 mt-3">
-            <button @click="save" class="bg-ctp-surface0 p-4 py-2 rounded-md">Save</button>
-            <!-- <button @click="download" class="bg-ctp-surface0 p-4 py-2 rounded-md">Export</button>
+    <div class="space-x-2 mt-3">
+      <button @click="save" class="bg-ctp-surface0 p-4 py-2 rounded-md">Save</button>
+      <!-- <button @click="download" class="bg-ctp-surface0 p-4 py-2 rounded-md">Export</button>
             <input type="file" @change="handleImport" name="fileinput" ref="fileinput"
                 class="bg-ctp-surface0 p-4 py-2 rounded-md"> -->
-        </div>
-</div></template>
\ No newline at end of file
+    </div>
+  </div>
+</template>
diff --git a/src/views/UserView.vue b/src/views/UserView.vue
index d00e645..3725e25 100644
--- a/src/views/UserView.vue
+++ b/src/views/UserView.vue
@@ -168,6 +168,11 @@ export default {
       </div>
     </div>
 
-    <twitch-chat v-if="chatVisible()" :isLive="true" :channelName="data.login" class="h-2/3"></twitch-chat>
+    <twitch-chat
+      v-if="chatVisible()"
+      :isLive="true"
+      :channelName="data.login"
+      class="h-2/3"
+    ></twitch-chat>
   </div>
 </template>
diff --git a/src/views/VodView.vue b/src/views/VodView.vue
index e811666..4f09264 100644
--- a/src/views/VodView.vue
+++ b/src/views/VodView.vue
@@ -137,6 +137,11 @@ export default {
       </div>
     </div>
 
-    <twitch-chat v-if="chatVisible()" :isVod="true" :channelName="data.streamer.login" ref="chat"></twitch-chat>
+    <twitch-chat
+      v-if="chatVisible()"
+      :isVod="true"
+      :channelName="data.streamer.login"
+      ref="chat"
+    ></twitch-chat>
   </div>
 </template>