Fix: websocket connection

package.json

@@ -41,6 +41,7 @@
 		"svelte-preprocess": "^5.0.1",
 		"svelte-tags-input": "^4.0.0",
 		"svgo": "^3.0.2",
+		"swiper": "^9.0.2",
 		"tailwind-clip-path": "^1.0.0",
 		"tailwind-scrollbar": "^2.1.0",
 		"tailwindcss": "^3.2.4",

src/app.css

@@ -6,4 +6,4 @@
     html {
         font-family: 'Montserrat', sans-serif;
     }
-}
+}

src/app.d.ts

@@ -18,4 +18,4 @@ declare namespace App {
 
 declare const __VERSION__: string
 
-declare module 'svelte-tags-input'
+declare module 'svelte-tags-input'

src/hooks.server.ts

@@ -1,4 +1,4 @@
-import { redirect, type HandleFetch } from '@sveltejs/kit'
+import { redirect, type HandleFetch, type Handle } from '@sveltejs/kit'
 import { get as getWritableVal } from 'svelte/store'
 import {
 	isMaintenanceModeEnabled,
@@ -8,7 +8,6 @@ import {
 	isFeaturePremiumPageEnabled
 } from '$lib/stores/remoteConfigStore'
 import { Authenticate } from '$lib/authentication/authentication'
-import type { Handle } from '@sveltejs/kit'
 import { env } from '$env/dynamic/public'
 import { get } from '$lib/api'
 import { current_user, user_role } from '$lib/stores/authStore'
@@ -51,18 +50,9 @@ export const handle: Handle = async ({ event, resolve }) => {
 
 		if (!role) {
 			try {
-				const headers: any = {
-					userId: userId
-				}
-				if (env.PUBLIC_CROSS_ORIGIN === 'false') {
-					headers['authorization'] = token
-				} else {
-					headers['x-api-key'] = env.PUBLIC_API_KEY
-				}
-
-				const allRoles = await get('roles', headers)
+				const allRoles = await get('roles', { userId, token })
 				if (Array.isArray(allRoles)) {
-					const userRole = await get('roles/role-mapping', headers)
+					const userRole = await get('roles/role-mapping', { userId, token })
 					if (userRole && userRole.role) {
 						const usersRoleName = allRoles.find((item) => {
 							return item._id == userRole.role
@@ -136,7 +126,7 @@ export const handleError = ({ error }: { error: any }) => {
 	}
 }
 
-export const handleFetch = (async ({
+export const handleFetch = (({
 	event,
 	request,
 	fetch
@@ -148,7 +138,7 @@ export const handleFetch = (async ({
 	if (request.url.startsWith(env.PUBLIC_API_URL)) {
 		request.headers['userId'] = event.locals.user.userId
 		if (env.PUBLIC_CROSS_ORIGIN === 'false') {
-			request.headers['authorization'] = event.locals.user.token
+			request.headers['Authorization'] = event.locals.user.token
 		} else {
 			request.headers['x-api-key'] = env.PUBLIC_X_API_KEY
 		}

src/lib/api.ts

@@ -28,7 +28,7 @@ async function send({
 
 	if (env.PUBLIC_CROSS_ORIGIN === 'false') {
 		if (headers && headers.token) {
-			opts.headers['authorization'] = headers.token
+			opts.headers['Authorization'] = headers.token
 		}
 	} else {
 		opts.headers['x-api-key'] = env.PUBLIC_X_API_KEY
@@ -37,7 +37,7 @@ async function send({
 	const res = await fetch(`${base}/${path}`, opts)
 	if (res.ok || res.status === 422) {
 		const text = await res.text()
-		if (path === 'wsinit/wsid') return text
+		if (path === 'wsinit/wsid'|| path.includes('wsinit/channelid')) return text
 		return text ? JSON.parse(text) : {}
 	}
 
@@ -56,6 +56,10 @@ export function post(path: string, data: any) {
 	return send({ method: 'POST', path, data })
 }
 
+export function patch(path: string, data: any) {
+	return send({ method: 'PATCH', path, data })
+}
+
 export function put(path: string, data: any = {}) {
 	return send({ method: 'PUT', path, data })
 }

src/lib/components/Browse/CreateChannelDrawer.svelte

@@ -68,11 +68,7 @@
 </script>
 
 <div class="drawer drawer-end absolute w-full z-20 top-0 right-0">
-	<input
-		id="create-channel-drawer"
-		type="checkbox"
-		class="drawer-toggle"
-		bind:checked={showDrawer} />
+	<input id="create-channel-drawer" type="checkbox" class="drawer-toggle" />
 	<div class="drawer-side">
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div on:click={() => (showDrawer = false)} class="drawer-overlay" />
@@ -82,11 +78,11 @@
 				bind:categoryIcons
 				bind:categories={newChannel.category} />
 		{:else}
-			<div class="bg-base-200 w-80 md:w-[30rem] flex flex-col">
-				<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">
-					Create a new channel
-				</p>
-				<form on:submit={() => addChannel()}>
+			<form on:submit={() => addChannel()}>
+				<div class="bg-base-200 w-80 md:w-[30rem] h-full flex flex-col">
+					<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">
+						Create a new channel
+					</p>
 					<div class="flex flex-col p-3">
 						<p class="text-xs">
 							When you create a channel, you may allow viewer's to observe your desktop as you host
@@ -180,8 +176,8 @@
 							>Cancel</button>
 						<button type="submit" class="btn btn-primary grow">Add</button>
 					</div>
-				</form>
-			</div>
+				</div>
+			</form>
 		{/if}
 	</div>
 </div>

src/lib/components/Browse/SearchChannel.svelte

@@ -4,6 +4,8 @@
 	import CreateChannelDrawer from './CreateChannelDrawer.svelte'
 	import { current_user } from '$lib/stores/authStore'
 
+	export let isDisabled = !current_user
+
 	let showDrawer = false
 </script>
 
@@ -20,12 +22,16 @@
 		</div>
 	</div>
 
-	<button
-		class="btn w-[21rem] btn-primary gap-2 drawer-button"
-		disabled={!$current_user}
-		on:click={() => (showDrawer = true)}>
-		<IconCreate />
-		Create a channel</button>
+	<div class="form-control">
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<label
+			for="create-channel-drawer"
+			class="btn w-[21rem] btn-primary gap-2 drawer-button"
+			on:click={() => (showDrawer = true)}
+			{...isDisabled ? { disabled: '' } : {}}>
+			<IconCreate />
+			Create a channel</label>
+	</div>
 
 	{#if showDrawer}
 		<CreateChannelDrawer bind:showDrawer />