Fix protocol issues

src/App.vue

@@ -3,7 +3,7 @@ import { RouterView } from 'vue-router'
 import NavbarItem from './components/NavbarView.vue'
 </script>
 
-<template>
+<template class="bg-ctp-base">
   <navbar-item></navbar-item>
 
   <Suspense>

src/components/StreamPreview.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { inject } from 'vue'
 export interface Stream {
   tags: string[]
   title: string
@@ -20,7 +21,7 @@ export default {
     }
   },
   async setup(props) {
-    const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
+    const protocol = inject('protocol')
 
     let streamData: Stream | null = null
     if (!props.stream && props.name) {

src/components/TwitchChat.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { ref, type Ref } from 'vue'
+import { ref, type Ref, inject } from 'vue'
 import BadgeVue from './ChatBadge.vue'
 import { getBadges } from '@/assets/badges'
 import { parseMessage } from '@/assets/messageParser'
@@ -19,13 +19,13 @@ export default {
   },
   async setup(props) {
     let messages: Ref<ParsedMessage[]> = ref([])
-    const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
+    const protocol = inject('protocol')  
-    
+    const wsProtocol = protocol === 'https://' ? 'wss://' : 'ws://'
     const badgesFetch = await fetch(`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/badges?channelName=${props.channelName}`)
     let badges: Badge[] =  (await badgesFetch.json()).data
 
     return {
-      ws: new WebSocket(`ws://${import.meta.env.VITE_BACKEND_DOMAIN}`),
+      ws: new WebSocket(`${wsProtocol}://${import.meta.env.VITE_BACKEND_DOMAIN}`),
       messages,
       badges,
       props,

src/main.ts

@@ -5,6 +5,15 @@ import './assets/index.css'
 
 const app = createApp(App)
 
+// Add protocol variable
+// For some reason, import.meta.env.VITE_HTTPS === "true"
+// returns false, even if it is true.
+// Making a copy of the variable seems to work
+const https = (import.meta.env.VITE_HTTPS.slice() === "true")
+app.provide('protocol', https ? 'https://' : 'http://')
+
+
+
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
 import {
   IoSearchOutline,
@@ -34,4 +43,4 @@ addIcons(
 
 app.component('v-icon', OhVueIcon)
 app.use(router)
-app.mount('#app')
+app.mount('#app')

src/views/CategoryView.vue

@@ -6,17 +6,14 @@ import ErrorMessage from '@/components/ErrorMessage.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
 
 export default {
+  inject: ['protocol'],
   async setup() {
     const route = useRoute()
-    const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
     const data: Ref<any | undefined> = ref()
-    const frontend_url = protocol + import.meta.env.VITE_INSTANCE_DOMAIN
     const game: string = route.params.game.toString()
 
     return {
       data,
-      frontend_url,
-      protocol,
       game
     }
   },

src/views/HomepageView.vue

@@ -6,16 +6,12 @@ import LoadingScreen from '@/components/LoadingScreen.vue'
 import CategoryPreview from '@/components/CategoryPreview.vue'
 
 export default {
+  inject: ['protocol'],
   async setup() {
-    const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
-
     let data: Ref<any | undefined> = ref()
-    let frontend_url = protocol + import.meta.env.VITE_INSTANCE_DOMAIN
 
     return {
       data,
-      protocol,
-      frontend_url,
       filterTags: '',
       following: ref([])
     }
@@ -82,6 +78,10 @@ export default {
 
     try {
       const res = await fetch(`${this.protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover`)
+      
+      console.log(this.protocol, this)
+      console.log(import.meta.env)
+
       const rawData = await res.json()
       if (rawData.status === 'ok') {
         this.data = rawData.data

src/views/SearchPageView.vue

@@ -7,6 +7,7 @@ import StreamPreviewVue from '@/components/StreamPreview.vue'
 import ChannelPreview from '@/components/ChannelPreview.vue'
 
 export default {
+    inject: ['protocol'],
     setup() {
         let data: Ref<any> = ref(null)
         return {
@@ -15,8 +16,7 @@ export default {
     },
     async mounted() {
         try {
-            const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
+            const res = await fetch(`${this.protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/search?query=${this.$route.query.query}`)
-            const res = await fetch(`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/search?query=${this.$route.query.query}`)
             const rawData = await res.json()
 
             this.data = rawData.data

src/views/UserView.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { ref } from 'vue'
+import { ref, inject } from 'vue'
 import { useRoute } from 'vue-router'
 import VideoPlayer from '@/components/VideoPlayer.vue'
 import TwitchChat from '@/components/TwitchChat.vue'
@@ -11,8 +11,8 @@ export default {
   async setup() {
     const route = useRoute()
     const username = route.params.username
-    const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
     const data = ref()
+    const protocol = inject('protocol')
     const videoOptions = {
       autoplay: true,
       controls: true,
@@ -42,11 +42,10 @@ export default {
   },
   async mounted() {
     const username = this.$route.params.username
-    const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
 
     try {
       const res = await fetch(
-        `${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/users/${username}`
+        `${this.protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/users/${username}`
       )
       const rawData = await res.json()
       if (rawData.status === 'ok') {