Add option to hide chat

src/mixins.ts

@@ -40,3 +40,14 @@ export async function getEndpoint(endpoint: string) {
 
   return data
 }
+
+export function chatVisible() {
+  const storage = localStorage.getItem('settings')
+  if (!storage) return true
+  const parsed = JSON.parse(storage)
+
+  // Flip becuase on the setting page it's
+  // displayed as "Hide Chat", but the value
+  // is chatVisible
+  return !parsed.chatVisible.selected
+}

src/views/SettingsView.vue

@@ -17,6 +17,11 @@ export default {
                     "selected": "480p",
                     "type": "option"
                 },
+                "chatVisible": {
+                    "name": "Hide Chat",
+                    "selected": false,
+                    "type": "checkbox"
+                },
             }
         } else {
             settings = JSON.parse(storedSettings)

src/views/UserView.vue

@@ -10,7 +10,7 @@ import LoadingScreen from '@/components/LoadingScreen.vue'
 import VideoTab from '@/components/user/VideoTab.vue'
 
 import type { StreamerData } from '@/types'
-import { truncate, abbreviate, getEndpoint } from '@/mixins'
+import { truncate, abbreviate, getEndpoint, chatVisible } from '@/mixins'
 
 export default {
   inject: ['rootBackendUrl'],
@@ -59,7 +59,8 @@ export default {
   },
   methods: {
     truncate,
-    abbreviate
+    abbreviate,
+    chatVisible
   }
 }
 </script>
@@ -167,6 +168,6 @@ export default {
       </div>
     </div>
 
-    <twitch-chat :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>

src/views/VodView.vue

@@ -9,7 +9,7 @@ import FollowButton from '@/components/FollowButton.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
 
 import type { Video } from '@/types'
-import { truncate, abbreviate, getEndpoint } from '@/mixins'
+import { truncate, abbreviate, getEndpoint, chatVisible } from '@/mixins'
 
 interface ChatComponent {
   updateVodComments: (time: number) => void
@@ -63,9 +63,11 @@ export default {
     truncate,
     abbreviate,
     handlePlayerTimeUpdate(time: number) {
+      if (!chatVisible()) return
       const chat = this.$refs.chat as ChatComponent
       chat.updateVodComments(time)
-    }
+    },
+    chatVisible
   }
 }
 </script>
@@ -135,6 +137,6 @@ export default {
       </div>
     </div>
 
-    <twitch-chat :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>