Format and eslint

src/assets/badges.ts

@@ -1,30 +1,30 @@
-import type { Badge, ParsedMessage } from './types';
+import type { Badge, ParsedMessage } from './types'
 
-export function getBadges(badges: Badge[], badgesToFind: { setId: string; version: string; }[]) {
-  const foundBadges = [];
+export function getBadges(badges: Badge[], badgesToFind: { setId: string; version: string }[]) {
+  const foundBadges = []
   if (!badges) return
 
-  for (let badgeToFind of badgesToFind) {
+  for (const badgeToFind of badgesToFind) {
     const badge = badges
       .filter((badge) => badge.setId === badgeToFind.setId)
-      .find((badge) => badge.version === badgeToFind.version);
+      .find((badge) => badge.version === badgeToFind.version)
 
     if (badge) {
-      foundBadges.push(badge);
+      foundBadges.push(badge)
     }
   }
 
-  return foundBadges;
+  return foundBadges
 }
 
 export const getBadgesFromMessage = (message: ParsedMessage, allBadges: Badge[]) => {
-    let badgesString = message.data.tags.badges;
-    if (!badgesString) return;
-    let badges = badgesString.split(',');
-    let formatedBadges = badges.map((badgeWithVersion: string) => {
-      const [setId, version] = badgeWithVersion.split('/');
-      return { setId, version };
-    });
+  const badgesString = message.data.tags.badges
+  if (!badgesString) return
+  const badges = badgesString.split(',')
+  const formatedBadges = badges.map((badgeWithVersion: string) => {
+    const [setId, version] = badgeWithVersion.split('/')
+    return { setId, version }
+  })
 
-    return getBadges(allBadges, formatedBadges);
+  return getBadges(allBadges, formatedBadges)
 }

src/assets/messageParser.ts

@@ -1,48 +1,46 @@
-import type { Badge, ParsedMessage } from "./types";
+import type { Badge, ParsedMessage } from './types'
 import { getBadgesFromMessage } from './badges'
 
-
 export function parseMessage(messageData: string, allBadges: Badge[]): ParsedMessage {
-    const message = JSON.parse(messageData);
+  const message = JSON.parse(messageData)
 
   switch (message.type) {
-      case "PRIVMSG": {
+    case 'PRIVMSG': {
       const tags = message.tags
       const username = message.username
       const data: ParsedMessage = {
-          type: "PRIVMSG",
-          data: { message: message.message, username, tags },
-        };
+        type: 'PRIVMSG',
+        data: { message: message.message, username, tags }
+      }
 
-        const badges = getBadgesFromMessage(data, allBadges);
+      const badges = getBadgesFromMessage(data, allBadges)
       data.data.badges = badges
 
       return data
     }
-      case "USERNOTICE": {
-        const username = message.tags.login;
-        const resub = message.tags["msg-id"] === "resub";
-        const months = parseInt(message.tags["msg-param-cumulative-months"]);
+    case 'USERNOTICE': {
+      const username = message.tags.login
+      const resub = message.tags['msg-id'] === 'resub'
+      const months = parseInt(message.tags['msg-param-cumulative-months'])
       return {
-          type: "USERNOTICE",
-          data: { username, resub, months },
-        };
+        type: 'USERNOTICE',
+        data: { username, resub, months }
       }
-      case "CLEARMSG": {
+    }
+    case 'CLEARMSG': {
       return {
-          type: "CLEARMSG",
+        type: 'CLEARMSG',
         data: {
-            username: message.tags['@login'],
+          username: message.tags['@login']
         }
       }
     }
     // Add more cases for other message types here
     default: {
       return {
-          type: "UNKNOWN",
-          data: { message },
-        };
+        type: 'UNKNOWN',
+        data: { message }
+      }
     }
   }
 }
-  

src/assets/qualitySelector.ts

@@ -6,13 +6,13 @@ import type { QualityLevelList, QualityLevel } from 'videojs-contrib-quality-lev
 
 export const createQualitySelector = (player: any) => {
   const qualityLevels: QualityLevelList = player.qualityLevels()
-  const MenuButton = videojs.getComponent('MenuButton');
-  const MenuItem = videojs.getComponent('MenuItem');
-  let formatedQualities: {name: string, index: number, id:string}[];
+  const MenuButton = videojs.getComponent('MenuButton')
+  const MenuItem = videojs.getComponent('MenuItem')
+  let formatedQualities: { name: string; index: number; id: string }[]
 
   const setQuality = (id: string) => {
-    const found = formatedQualities.find(i => i.id === id)
-    for(let quality of qualityLevels.levels_) {
+    const found = formatedQualities.find((i) => i.id === id)
+    for (const quality of qualityLevels.levels_) {
       if (quality.id !== id) {
         quality.enabled = false
       } else {
@@ -34,7 +34,7 @@ export const createQualitySelector = (player: any) => {
         const qualitySelectorButton = new MenuItem(player, { label: item.name })
         qualitySelectorButton.handleClick = (data) => {
           const qualityClicked = data.currentTarget.innerText
-          const id = formatedQualities.find(i => i.name === qualityClicked)?.id
+          const id = formatedQualities.find((i) => i.name === qualityClicked)?.id
 
           if (id) {
             setQuality(id)
@@ -45,7 +45,7 @@ export const createQualitySelector = (player: any) => {
       })
     }
   }
-  videojs.registerComponent('CustomMenuButton', CustomMenuButton);
+  videojs.registerComponent('CustomMenuButton', CustomMenuButton)
 
   qualityLevels.on('addqualitylevel', () => {
     formatedQualities = qualityLevels.levels_.map((quality: QualityLevel) => {
@@ -56,14 +56,13 @@ export const createQualitySelector = (player: any) => {
       }
     })
 
-
     player.controlBar.addChild('CustomMenuButton', {
       title: 'Qualities',
       items: formatedQualities
-    });
+    })
   })
 
   qualityLevels.on('change', function () {
-    const qualityLabel = qualityLevels[qualityLevels.selectedIndex].height?.toString() + 'p'
+    // TODO: Change label off button
   })
 }

src/assets/types/Badge.ts

@@ -1,7 +1,7 @@
 export interface Badge {
-    id: string,
-    title: string,
-    setId: string,
-    version: string,
+  id: string
+  title: string
+  setId: string
+  version: string
   images: { [k: string]: string }
 }

src/assets/types/ParsedMessage.ts

@@ -1,5 +1,4 @@
 export interface ParsedMessage {
-    type: string;
-    data: { [k: string]: any };
-};
-  
+  type: string
+  data: { [k: string]: any }
+}

src/views/CategoryView.vue

@@ -20,9 +20,11 @@ export default {
     const game: string = this.$route.params.game.toString()
 
     try {
-        const res = await fetch(`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${game}`)
+      const res = await fetch(
+        `${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${game}`
+      )
       if (!res.ok) {
-          return this.data = { status: 'error' }
+        return (this.data = { status: 'error' })
       }
       this.data = await res.json()
     } catch (err) {

src/views/HomepageView.vue

@@ -11,7 +11,6 @@ export default {
     let data: Ref<any | undefined> = ref()
     let frontend_url = protocol + import.meta.env.VITE_INSTANCE_DOMAIN
 
-
     return {
       data,
       protocol,
@@ -30,7 +29,7 @@ export default {
     },
 
     filterSearches(toFilter: string) {
-      const categories: HTMLCollectionOf<Element> = this.$refs.categoryItem as HTMLCollectionOf<Element>
+      const categories = this.$refs.categoryItem
       const wantedTags: string[] = toFilter.split(',').filter((v) => v.toLowerCase())
 
       for (let category of categories as any) {
@@ -100,7 +99,6 @@ export default {
       console.error(error)
       this.data = { status: 'error' }
     }
-
   },
   components: {
     StreamPreviewVue,
@@ -111,7 +109,6 @@ export default {
 </script>
 
 <template>
-
   <loading-screen v-if="!data"></loading-screen>
   <error-message v-else-if="data.status === 'error'"></error-message>
 
@@ -120,7 +117,11 @@ export default {
       <h1 class="font-bold text-5xl">Following</h1>
       <p class="text-xl">Streamers you follow</p>
       <ul class="flex overflow-x-scroll flex-nowrap h-80 space-x-1">
-        <li v-for="streamer in following" :key="streamer" class="inline-block hover:scale-105 transition-transform">
+        <li
+          v-for="streamer in following"
+          :key="streamer"
+          class="inline-block hover:scale-105 transition-transform"
+        >
           <stream-preview-vue :name="streamer"></stream-preview-vue>
         </li>
       </ul>

src/views/UserView.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import VideoPlayer from '@/components/VideoPlayer.vue'
 import TwitchChat from '@/components/TwitchChat.vue'
@@ -15,13 +15,15 @@ export default {
 
     const getUser = async () => {
       try {
-        const res = await fetch(`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/users/${username}`)
+        const res = await fetch(
+          `${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/users/${username}`
+        )
         const data = await res.json()
         return data
       } catch (error) {
         console.error(error)
         return {
-          status: 'error',
+          status: 'error'
         }
       }
     }
@@ -32,7 +34,9 @@ export default {
       controls: true,
       sources: [
         {
-          src: `${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/proxy/stream/${username}/hls.m3u8`,
+          src: `${protocol}${
+            import.meta.env.VITE_BACKEND_DOMAIN
+          }/proxy/stream/${username}/hls.m3u8`,
           type: 'application/vnd.apple.mpegurl'
         }
       ],
@@ -68,9 +72,7 @@ export default {
 }
 </script>
 
-
 <template>
-
   <loading-screen v-if="!data"></loading-screen>
 
   <error-message v-else-if="data.status === 'error'"></error-message>