From 108fc94a479a5cec9afd46ead786ea00fb455ad2 Mon Sep 17 00:00:00 2001
From: Saiful <msisaifulsaif@gmail.com>
Date: Mon, 16 Jan 2023 07:33:22 +0600
Subject: [PATCH 01/19] fixed auth modal logic and responsive design

---
 src/lib/components/Browse/LoginPrompt.svelte | 20 ++++++++++++++------
 src/lib/stores/helperStore.ts                |  3 +++
 src/routes/+layout.svelte                    | 15 ++++++++++++---
 3 files changed, 29 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/stores/helperStore.ts

diff --git a/src/lib/components/Browse/LoginPrompt.svelte b/src/lib/components/Browse/LoginPrompt.svelte
index fc8c27e6..3afb63cb 100644
--- a/src/lib/components/Browse/LoginPrompt.svelte
+++ b/src/lib/components/Browse/LoginPrompt.svelte
@@ -4,6 +4,7 @@
 	import IconSocialGitHubInverse from '$lib/assets/icons/social/IconSocialGitHubInverse.svelte'
 	// import { getGitHubUrl, getDiscordUrl, getGoogleUrl } from '$lib/utils/authUrl'
 	import { env } from '$env/dynamic/public'
+	import { login_modal } from '$lib/stores/helperStore'
 
 	async function getHref(provider: string) {
 		return await fetch(`${env.PUBLIC_API_URL}/auth/${provider}`, {
@@ -19,11 +20,18 @@
 	}
 </script>
 
-<!-- Fix to close on click away -->
-<!-- <input type="checkbox" id="login-prompt" class="modal-toggle" /> -->
-<div id="login-prompt-modal" class="modal cursor-pointer">
-	<label class="modal-box relative" for="">
-		<div class="py-4 space-y-5 px-10">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+	class="modal cursor-pointer {$login_modal ? 'modal-open' : ''}"
+	on:click={() => {
+		$login_modal = false
+	}}>
+	<div
+		class="modal-box relative"
+		on:click={(e) => {
+			e.stopPropagation()
+		}}>
+		<div class="py-4 space-y-5 px-4 md:px-10">
 			{#if env.PUBLIC_CROSS_ORIGIN === 'false'}
 				<a class="btn w-full btn-primary gap-4" href="{env.PUBLIC_API_URL}/auth/discord">
 					<IconSocialDiscordInverse />
@@ -52,5 +60,5 @@
 				<a class="link link-info" href="/legal">all of our policies </a>
 			</p>
 		</div>
-	</label>
+	</div>
 </div>
diff --git a/src/lib/stores/helperStore.ts b/src/lib/stores/helperStore.ts
new file mode 100644
index 00000000..bfc83c49
--- /dev/null
+++ b/src/lib/stores/helperStore.ts
@@ -0,0 +1,3 @@
+import { writable, type Writable } from 'svelte/store'
+
+export const login_modal: Writable<any> = writable(null)
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 89a16e74..427570d2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
 	import { browser } from '$app/environment'
 	import { navigating } from '$app/stores'
 	import { getJWT, getUserId, me, setJWT, setUserId, currentUser } from '$lib/stores/authStore'
+	import { login_modal } from '$lib/stores/helperStore'
 
 	// NProgress Loading bar
 	import 'nprogress/nprogress.css'
@@ -46,6 +47,8 @@
 
 	export let data: any
 
+	let nav_drawer: HTMLInputElement
+
 	$: data.user, storeUserData()
 
 	function storeUserData() {
@@ -80,7 +83,7 @@
 
 <!-- {#if $isAuthenticated} -->
 <div class="drawer drawer-mobile">
-	<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
+	<input id="my-drawer-2" bind:this={nav_drawer} type="checkbox" class="drawer-toggle" />
 	<div class="drawer-content bg-base-200">
 		<!-- Page content here -->
 		<label for="my-drawer-2" class="btn btn-ghost normal-case text-xl drawer-button lg:hidden"
@@ -218,9 +221,15 @@
 					</li>
 				{:else}
 					<li>
-						<a href="#login-prompt-modal">
+						<button
+							on:click={() => {
+								$login_modal = true
+								if (nav_drawer.checked) {
+									nav_drawer.checked = false
+								}
+							}}>
 							<IconDrawerLogOut />
-							Log In</a>
+							Log In</button>
 					</li>
 				{/if}
 			</ul>

From 734cf7dc253b1a6885d8b6e4380dcbdcb01bf0ea Mon Sep 17 00:00:00 2001
From: Saiful <msisaifulsaif@gmail.com>
Date: Tue, 17 Jan 2023 00:18:37 +0600
Subject: [PATCH 02/19] fix logic

---
 src/app.d.ts                |   5 +-
 src/hooks.server.ts         | 107 +++++++++++++++++++++++++++++++++++-
 src/lib/stores/authStore.ts |  85 +++++++---------------------
 src/routes/+layout.svelte   |  25 ++-------
 4 files changed, 135 insertions(+), 87 deletions(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index 91964bd3..ed2cddb3 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -5,8 +5,9 @@
 declare namespace App {
 	interface Locals {
 		user: {
-			token: string
-			userId: string
+			token?: string
+			userId?: string
+			user?: object
 		}
 	}
 	// interface PageData {}
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 3701b7aa..c5e52a12 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -1,19 +1,36 @@
+import { getUserDetails } from '$lib/stores/authStore'
 import type { Handle } from '@sveltejs/kit'
 
 export const handle: Handle = async ({ event, resolve }) => {
-	const token = event.url.searchParams.get('token') || event.cookies.get('token')
 	const userId = event.url.searchParams.get('userId') || event.cookies.get('userId')
+	let token = event.url.searchParams.get('token') || event.cookies.get('token')
+	let user
+
+	if (event.locals && event.locals.user) {
+		user = event.locals.user.user
+	}
 
 	if (!token || !userId) {
 		return await resolve(event)
 	}
 
 	if (token && userId) {
+		if (!user) {
+			const response = await getUserDetails(token, userId)
+			if (response) {
+				if (response.freshJwt) {
+					token = response.freshJwt
+				}
+				user = response.user
+			}
+		}
+
 		event.cookies.set('token', token)
 		event.cookies.set('userId', userId)
 		event.locals.user = {
 			userId,
-			token
+			token,
+			user
 		}
 	}
 
@@ -105,3 +122,89 @@ export const handle: Handle = async ({ event, resolve }) => {
 //         errorId
 //     };
 // }) satisfies HandleServerError;
+
+// import { remoteConfigStore } from '$lib/stores/remoteConfigStore'
+// import type { Handle, HandleServerError, RequestEvent } from '@sveltejs/kit'
+// import type { MaybePromise } from '@sveltejs/kit/types/private'
+// import { authStore } from '$lib/stores/authStore'
+
+// export const handle = (async ({ event, resolve }: { event: RequestEvent, resolve: MaybePromise<Response> }) => {
+//     const isAdminPage = /^\/admin\/(.*)/.test(event.url.pathname)
+//     const isHomePage = /^\/home\/(.*)/.test(event.url.pathname)
+//     const isProfilePage = /^\/profile\/(.*)/.test(event.url.pathname)
+//     const isPremiumPage = /^\/premium\/(.*)/.test(event.url.pathname)
+//     const isChannelPage = /^\/channel\/(.*)/.test(event.url.pathname)
+//     await remoteConfigStore.getRemoteConfigs()
+//     const isMaintenanceModeEnabled = remoteConfigStore.isMaintenanceModeEnabled
+
+//     const jwtToken = event.url.searchParams.get('token')
+//     const userId = event.url.searchParams.get('userId')
+
+//     if (jwtToken) authStore.setJWT({ jwt: jwtToken })
+//     if (userId) authStore.setUserId({ userId })
+//     const user = await authStore.me()
+//     if (user) {
+//         if (user.status == 401 || user.status == 500) {
+//             await authStore.logout()
+//         } else if (user.isBanned) {
+//             // this.snackBar.open(
+//             //     'Your account is banned. Please contact support if you have any questions',
+//             //     null,
+//             //     { duration: 10000 }
+//             // )
+//             await authStore.logout()
+//         } else {
+//             // try {
+//             //     const onConnectionSuccess = async () => {
+//             //         await this.socket.emitUserConnection(user._id, true)
+//             //         this.socket.listenToUserConnection(user._id).subscribe(async (data) => {
+//             //             authStore.setUser(data.user)
+//             //         })
+//             //     }
+//             //     if (this.socket.apiSocket.readyState == WebSocket.OPEN) await onConnectionSuccess()
+
+//             // } catch (e) {
+//             //     console.log(e)
+//             // }
+//             return {
+//                 status: 302,
+//                 redirect: '/home'
+//             }
+//         }
+//     } else {
+//         return {
+//             status: 302,
+//             redirect: '/login'
+//         }
+//     }
+
+//     // if (
+//     //     !event.locals.session.user &&
+//     //     (isAdminPage || isHomePage || isProfilePage || isPremiumPage || isChannelPage)
+//     // ) {
+//     //     return {
+//     //         status: 302,
+//     //         redirect: '/login'
+//     //     }
+//     // } else {
+//     //     if (isMaintenanceModeEnabled) {
+//     //         if (!event.locals.session.user.isAdmin) {
+//     //             return {
+//     //                 status: 302,
+//     //                 redirect: '/maintenance'
+//     //             }
+//     //         } else return { props: {} }
+//     //     } else return { props: {} }
+//     // }
+// })
+
+// export const handleError = (({ error, event }) => {
+//     const errorId = crypto.randomUUID();
+//     // example integration with https://sentry.io/
+//     // Sentry.captureException(error, { event, errorId });
+
+//     return {
+//         message: 'Whoops!',
+//         errorId
+//     };
+// }) satisfies HandleServerError;
diff --git a/src/lib/stores/authStore.ts b/src/lib/stores/authStore.ts
index 1fd97939..5127b744 100644
--- a/src/lib/stores/authStore.ts
+++ b/src/lib/stores/authStore.ts
@@ -1,69 +1,26 @@
 import { env } from '$env/dynamic/public'
 import { writable, type Writable } from 'svelte/store'
-const JWT_KEY = 'jwt'
 
 export const currentUser: Writable<any> = writable(null)
 
-function logout() {
-    setUser({ user: null })
-    window.localStorage.clear()
-    window.location.href = '/'
-}
-
-
-function getJWT() {
-    return window.localStorage.getItem(JWT_KEY)
-}
-
-function getUserId() {
-    return window.localStorage.getItem('userId')
-}
-
-function setJWT({ jwt }: { jwt: string }) {
-    window.localStorage.setItem(JWT_KEY, jwt)
-}
-
-function setUserId({ userId }: { userId: string }) {
-    window.localStorage.setItem('userId', userId)
-}
-
-function setUser({ user }: { user: any }) {
-    if (!user) {
-        window.localStorage.clear()
-    }
-    currentUser.set(user)
-}
-
-async function me() {
-    const jwt = window.localStorage.getItem('jwt')
-    const userId = window.localStorage.getItem('jwt')
-    if (jwt === null || userId === null) {
-        logout(); return null
-    } else {
-        return await fetch(`${env.PUBLIC_API_URL}/auth/me`, {
-            method: 'GET',
-            headers: {
-                'Authorization': jwt,
-                'userId': userId
-            }
-        }).then(async response => {
-            const res = await response.json()
-            setUser({ user: res.user })
-            if (res.freshJwt) setJWT({ jwt: res.freshJwt })
-            return res.user
-        }).catch((err) => {
-            if (err.status === 401 || err.includes('Error')) logout()
-            return null
-        })
-    }
-}
-
-export {
-    logout,
-    getJWT,
-    getUserId,
-    setJWT,
-    setUserId,
-    setUser,
-    me
-}
+async function getUserDetails(jwt: string, userId: string) {
+	if (!jwt || !userId) {
+		return null
+	} else {
+		return await fetch(`${env.PUBLIC_API_URL}/auth/me`, {
+			method: 'GET',
+			headers: {
+				authorization: jwt,
+				user_id: userId
+			}
+		})
+			.then(async (response) => {
+				const res = await response.json()
+				return res.user
+			})
+			.catch(() => {
+				return null
+			})
+	}
+}
+export { getUserDetails }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 427570d2..c06d44aa 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
 	import NProgress from 'nprogress'
 	import { browser } from '$app/environment'
 	import { navigating } from '$app/stores'
-	import { getJWT, getUserId, me, setJWT, setUserId, currentUser } from '$lib/stores/authStore'
+	import { currentUser } from '$lib/stores/authStore'
 	import { login_modal } from '$lib/stores/helperStore'
 
 	// NProgress Loading bar
@@ -53,26 +53,11 @@
 
 	function storeUserData() {
 		if (browser) {
-			let token, userId
-			if (data.user) {
-				token = data.user.token
-				userId = data.user.userId
-			} else {
-				token = getJWT()
-				userId = getUserId()
-			}
-
-			if (token || userId) {
-				setJWT({ jwt: token })
-				setUserId({ userId })
-				me()
+			if (data?.user?.user) {
+				$currentUser = data.user.user
 			}
 		}
 	}
-
-	function logout() {
-		logout()
-	}
 </script>
 
 <svelte:head>
@@ -215,7 +200,7 @@
 				</li>
 				{#if $currentUser}
 					<li>
-						<button on:click={logout}>
+						<button>
 							<IconDrawerLogOut />
 							Log Out</button>
 					</li>
@@ -233,6 +218,7 @@
 					</li>
 				{/if}
 			</ul>
+
 			<footer class="mt-auto p-4">
 				<!-- <RisingStars /> -->
 				<div class="grid grid-flow-col gap-4">
@@ -258,4 +244,5 @@
 		</div>
 	</div>
 </div>
+
 <!-- {/if} -->

From 274ddea59b72efcb278d6249b8f2ffcbb655955f Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Mon, 16 Jan 2023 15:32:04 -0600
Subject: [PATCH 03/19] Chore: changed exported classes to exported functions

---
 src/lib/stores/channelStore.ts |  563 +++++++-------
 src/lib/stores/chatStore.ts    |  717 ++++++++---------
 src/lib/stores/sfxStore.ts     |  191 +++--
 src/lib/stores/socketStore.ts  |  664 ++++++++--------
 src/lib/stores/streamStore.ts  | 1336 ++++++++++++++++----------------
 5 files changed, 1777 insertions(+), 1694 deletions(-)

diff --git a/src/lib/stores/channelStore.ts b/src/lib/stores/channelStore.ts
index 86e33aae..82786427 100644
--- a/src/lib/stores/channelStore.ts
+++ b/src/lib/stores/channelStore.ts
@@ -1,313 +1,330 @@
 import { writable, type Writable } from "svelte/store"
 import { env } from '$env/dynamic/public'
 
-class ChannelStore {
-    private skip = 0
-    private limit = 100
-    public filterTechList = []
-    public techList = []
-
-    constructor(
-        public searchQuery: Writable<string> = writable(''),
-        public channels: Writable<[]> = writable([]),
-        public currentChannel: Writable<any> = writable(null),
-    ) {}
-
-    public async createChannel({ title, description, thumbnail, category, tags, isPrivate = false, user, channelType }
-        : { title: string, description: string, thumbnail: string, category: string[], tags: string[], isPrivate: boolean, user: any, channelType: string }
-    ) {
-        return await fetch(`${env.PUBLIC_API_URL}/channel`, {
-            method: 'POST',
-            body: JSON.stringify({
-                title,
-                description,
-                thumbnail,
-                category,
-                tags,
-                isPrivate,
-                user: user._id,
-                createdBy: user.displayName,
-                avatar: user.avatar,
-                isHostActive: true,
-                channelType
-            })
-        }).then(async response => {
-            const res = await response.json()
-            if (channelType === "channel") {
-                await this.addHostChannelToUser({ hostChannelId: res.channel._id })
-                this.currentChannel = res
-            }
-            return res
-        })
-    }
-
-    public async deleteChannel({ channelId }: { channelId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/channels/${channelId}?bucketName=attachments`, {
-            method: 'DELETE'
+let skip = 0
+let limit = 100
+let filterTechList: any[] = []
+const techList = []
+
+export const searchQuery: Writable<string> = writable('')
+export const channels: Writable<[]> = writable([])
+export const currentChannel: Writable<any> = writable(null)
+
+async function createChannel({ title, description, thumbnail, category, tags, isPrivate = false, user, channelType }
+    : { title: string, description: string, thumbnail: string, category: string[], tags: string[], isPrivate: boolean, user: any, channelType: string }
+) {
+    return await fetch(`${env.PUBLIC_API_URL}/channel`, {
+        method: 'POST',
+        body: JSON.stringify({
+            title,
+            description,
+            thumbnail,
+            category,
+            tags,
+            isPrivate,
+            user: user._id,
+            createdBy: user.displayName,
+            avatar: user.avatar,
+            isHostActive: true,
+            channelType
         })
-    }
-
-    public async getChannel({ channelId }: { channelId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/channel?channelId=${channelId}`, {
-            method: 'GET'
-        }).then(response => response.json())
-    }
+    }).then(async response => {
+        const res = await response.json()
+        if (channelType === "channel") {
+            await addHostChannelToUser({ hostChannelId: res.channel._id })
+            currentChannel.set(res)
+        }
+        return res
+    })
+}
 
-    public async addChannelToUser({ channelId }: { channelId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/users/channels?channelId=${channelId}`, {
-            method: 'GET'
-        }).then(async response => {
-            const res = await response.json()
-            //TODO: update user in authStore
-        })
-    }
+async function deleteChannel({ channelId }: { channelId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/channels/${channelId}?bucketName=attachments`, {
+        method: 'DELETE'
+    })
+}
 
-    public async removeChannelFromUser({ channelId, userId }: { channelId: string, userId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/users/channels?channelId=${channelId}`, {
-            method: 'DELETE'
-        }).then(async response => {
-            const res = await response.json()
-            //TODO: update user in authStore
-            //if (this.user == userId) this.authService.setUser(userUpdate)
-        })
-    }
+async function getChannel({ channelId }: { channelId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/channel?channelId=${channelId}`, {
+        method: 'GET'
+    }).then(response => response.json())
+}
 
-    public async addHostChannelToUser({ hostChannelId }: { hostChannelId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/users/host-channels?hostChannelId=${hostChannelId}`, {
-            method: 'PUT'
-        }).then(async response => {
-            const res = await response.json()
-            //TODO: update user in authStore
-        })
-    }
+async function addChannelToUser({ channelId }: { channelId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/users/channels?channelId=${channelId}`, {
+        method: 'GET'
+    }).then(async response => {
+        const res = await response.json()
+        //TODO: update user in authStore
+    })
+}
 
-    public async removeHostChannelFromUser({ hostChannelId }: { hostChannelId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/users/host-channels?hostChannelId=${hostChannelId}`, {
-            method: 'DELETE'
-        }).then(async response => {
-            const res = await response.json()
-            //TODO: update user in authStore
-        })
-    }
+async function removeChannelFromUser({ channelId, userId }: { channelId: string, userId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/users/channels?channelId=${channelId}`, {
+        method: 'DELETE'
+    }).then(async response => {
+        const res = await response.json()
+        //TODO: update user in authStore
+        //if (this.user == userId) this.authService.setUser(userUpdate)
+    })
+}
 
-    public async blockUserFromChannel({ channelId, userId }: { channelId: string, userId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/channels/blocked-users?channelId=${channelId}&userId=${userId}`, {
-            method: 'PATCH'
-        })
-    }
+async function addHostChannelToUser({ hostChannelId }: { hostChannelId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/users/host-channels?hostChannelId=${hostChannelId}`, {
+        method: 'PUT'
+    }).then(async response => {
+        const res = await response.json()
+        //TODO: update user in authStore
+    })
+}
 
-    public async unblockUserFromChannel({ channelId, userId }: { channelId: string, userId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/channels/blocked-users?channelId=${channelId}&userId=${userId}`, {
-            method: 'DELETE'
-        })
-    }
+async function removeHostChannelFromUser({ hostChannelId }: { hostChannelId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/users/host-channels?hostChannelId=${hostChannelId}`, {
+        method: 'DELETE'
+    }).then(async response => {
+        const res = await response.json()
+        //TODO: update user in authStore
+    })
+}
 
-    public async updateChannelProperties({ channelId, updatedProperties }: { channelId: string, updatedProperties: any }) {
-        return await fetch(`${env.PUBLIC_API_URL}/channels?channelId=${channelId}`, {
-            method: 'PATCH',
-            body: JSON.stringify(updatedProperties)
-        })
-    }
+async function blockUserFromChannel({ channelId, userId }: { channelId: string, userId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/channels/blocked-users?channelId=${channelId}&userId=${userId}`, {
+        method: 'PATCH'
+    })
+}
 
-    //TODO: fix this
-    // isUserBlockedFromChannel({ userId }: { userId: string }) {
-    //     return this.currentChannel.blockedUsers?.some((user) => !!(user == userId))
-    // }
+async function unblockUserFromChannel({ channelId, userId }: { channelId: string, userId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/channels/blocked-users?channelId=${channelId}&userId=${userId}`, {
+        method: 'DELETE'
+    })
+}
 
-    public async addAttachments({ channelId, attachmentUrl }: { channelId: string, attachmentUrl: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/channels/attachments?channelId=${channelId}&encodeURIComponent=${encodeURIComponent(attachmentUrl)}`, {
-            method: 'PUT'
-        })
-    }
+async function updateChannelProperties({ channelId, updatedProperties }: { channelId: string, updatedProperties: any }) {
+    return await fetch(`${env.PUBLIC_API_URL}/channels?channelId=${channelId}`, {
+        method: 'PATCH',
+        body: JSON.stringify(updatedProperties)
+    })
+}
 
-    public async deleteAttachment({ channelId, attachmentUrl }: { channelId: string, attachmentUrl: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/channels/attachments?channelId=${channelId}&encodeURIComponent=${encodeURIComponent(attachmentUrl)}`, {
-            method: 'DELETE'
-        })
-    }
+//TODO: fix this
+// isUserBlockedFromChannel({ userId }: { userId: string }) {
+//     return this.currentChannel.blockedUsers?.some((user) => !!(user == userId))
+// }
 
-    public async addChannelNotificationSubscriber({ channelId, userId }: { channelId: string, userId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/channels/notification-subscribers?channelId=${channelId}&userId=${userId}`, {
-            method: 'PUT'
-        })
-    }
+async function addAttachments({ channelId, attachmentUrl }: { channelId: string, attachmentUrl: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/channels/attachments?channelId=${channelId}&encodeURIComponent=${encodeURIComponent(attachmentUrl)}`, {
+        method: 'PUT'
+    })
+}
 
-    public async removeChannelNotificationSubscriber({ channelId, userId }: { channelId: string, userId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/channels/notification-subscribers?channelId=${channelId}&userId=${userId}`, {
-            method: 'DELETE'
-        })
-    }
+async function deleteAttachment({ channelId, attachmentUrl }: { channelId: string, attachmentUrl: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/channels/attachments?channelId=${channelId}&encodeURIComponent=${encodeURIComponent(attachmentUrl)}`, {
+        method: 'DELETE'
+    })
+}
 
-    public async deleteMembers({ channelId }: { channelId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/channel-members?channelId=${channelId}`, {
-            method: 'DELETE'
-        })
-    }
+async function addChannelNotificationSubscriber({ channelId, userId }: { channelId: string, userId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/channels/notification-subscribers?channelId=${channelId}&userId=${userId}`, {
+        method: 'PUT'
+    })
+}
 
-    resetSkipLimit() {
-        this.skip = 0
-        this.limit = 100
-    }
+async function removeChannelNotificationSubscriber({ channelId, userId }: { channelId: string, userId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/channels/notification-subscribers?channelId=${channelId}&userId=${userId}`, {
+        method: 'DELETE'
+    })
+}
 
-    public async getInitialChannels() {
-        this.currentChannel.set(null)
-        this.searchQuery.set('')
-        this.filterTechList = []
-        const user = null
-        //TODO: get this.authStore.currentUser
-        if (user) {
-            this.channels = await this.getMyChannels()
-        } else {
-            this.channels.set([])
-        }
-        await this.getChannels({ isRefresh: true })
-        return this.channels
-    }
+async function deleteMembers({ channelId }: { channelId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/channel-members?channelId=${channelId}`, {
+        method: 'DELETE'
+    })
+}
 
-    public async getMyChannels() {
-        return await fetch(`${env.PUBLIC_API_URL}/channels/me/hosted`, {
-            method: 'GET'
-        }).then(response => response.json())
-    }
+function resetSkipLimit() {
+    skip = 0
+    limit = 100
+}
 
-    public async getChannelsByUserId({ userId, searchQuery = '', skip = 0, limit = 50 }: { userId: string, searchQuery: string, skip?: number, limit?: number }) {
-        return await fetch(`${env.PUBLIC_API_URL}/channels/user?userId=${userId}&searchQuery=${searchQuery}&skip=${skip}&limit=${limit}`, {
-            method: 'GET'
-        }).then(response => response.json())
+async function getInitialChannels() {
+    currentChannel.set(null)
+    searchQuery.set('')
+    filterTechList = []
+    const user = null
+    //TODO: get this.authStore.currentUser
+    if (user) {
+        channels.set(await getMyChannels())
+    } else {
+        channels.set([])
     }
+    await getChannels({ isRefresh: true })
+    return channels
+}
 
-    public async getChannels({ isRefresh = false }: { isRefresh?: boolean } = {}) {
-        if (isRefresh) {
-            this.resetSkipLimit()
-        }
+async function getMyChannels() {
+    return await fetch(`${env.PUBLIC_API_URL}/channels/me/hosted`, {
+        method: 'GET'
+    }).then(response => response.json())
+}
 
-        return await fetch(`${env.PUBLIC_API_URL}/channels?searchQuery=${this.searchQuery}&category=${this.filterTechList.map((item: any) => item.item_text).join()}&skip=${this.skip}&limit=${this.limit}`, {
-            method: 'GET'
-        }).then(async response => {
-            const res = await response.json()
-            if (res.length) {
-                this.skip += this.limit
-                //TODO: push res to channels
-                // this.channels.push(...res)
-            } else {
-                //TODO: show alert
-                // if ((this.searchQuery || this.filterTechList.length) && !this.skip)
-                //     this.snackBar.open('No results with the search criteria', null, {
-                //         duration: 2000
-                //     })
-            }
-            return this.channels
-        })
+async function getChannelsByUserId({ userId, searchQuery = '', skip = 0, limit = 50 }: { userId: string, searchQuery: string, skip?: number, limit?: number }) {
+    return await fetch(`${env.PUBLIC_API_URL}/channels/user?userId=${userId}&searchQuery=${searchQuery}&skip=${skip}&limit=${limit}`, {
+        method: 'GET'
+    }).then(response => response.json())
+}
 
+async function getChannels({ isRefresh = false }: { isRefresh?: boolean } = {}) {
+    if (isRefresh) {
+        resetSkipLimit()
     }
 
-    public async searchChannels() {
-        this.channels.set([])
-        if (!this.searchQuery && !this.filterTechList.length) {
-            return this.getInitialChannels()
+    return await fetch(`${env.PUBLIC_API_URL}/channels?searchQuery=${searchQuery}&category=${filterTechList.map((item: any) => item.item_text).join()}&skip=${skip}&limit=${limit}`, {
+        method: 'GET'
+    }).then(async response => {
+        const res = await response.json()
+        if (res.length) {
+            skip += limit
+            //TODO: push res to channels
+            // this.channels.push(...res)
         } else {
-            return this.getChannels({ isRefresh: true })
+            //TODO: show alert
+            // if ((this.searchQuery || this.filterTechList.length) && !this.skip)
+            //     this.snackBar.open('No results with the search criteria', null, {
+            //         duration: 2000
+            //     })
         }
+        return channels
+    })
+}
+
+async function searchChannels() {
+    channels.set([])
+    if (!searchQuery && !filterTechList.length) {
+        return getInitialChannels()
+    } else {
+        return getChannels({ isRefresh: true })
     }
+}
 
-    async leaveChannel({ userId, deleteOrLeaveOnExit = false }: { userId: string, deleteOrLeaveOnExit?: boolean }) {
-        //TODO: fix writeable subscribe
-        this.currentChannel.subscribe(async value => {
-            if (value) {
-                if (value.user === userId) {
-                    // if host
-                    if (deleteOrLeaveOnExit) {
-                        await this.removeHostChannelFromUser({
-                            hostChannelId: value._id
-                        })
-                        await this.deleteChannel({ channelId: value._id })
-                        await this.deleteMembers({
-                            channelId: value._id
-                        })
-                    }
-                } else {
-                    // if participant
-                    if (deleteOrLeaveOnExit) {
-                        await this.removeChannelFromUser({
-                            channelId: value._id,
-                            userId
-                        })
-                    }
+async function leaveChannel({ userId, deleteOrLeaveOnExit = false }: { userId: string, deleteOrLeaveOnExit?: boolean }) {
+    //TODO: fix writeable subscribe
+    currentChannel.subscribe(async value => {
+        if (value) {
+            if (value.user === userId) {
+                // if host
+                if (deleteOrLeaveOnExit) {
+                    await removeHostChannelFromUser({
+                        hostChannelId: value._id
+                    })
+                    await deleteChannel({ channelId: value._id })
+                    await deleteMembers({
+                        channelId: value._id
+                    })
+                }
+            } else {
+                // if participant
+                if (deleteOrLeaveOnExit) {
+                    await removeChannelFromUser({
+                        channelId: value._id,
+                        userId
+                    })
                 }
-                this.currentChannel.set(null)
             }
-        })
-    }
-
-    async enterChannel({ channel }: { channel: any }) {
-        this.currentChannel = channel
-        return this.currentChannel
-    }
-
-    async toggleNotifications({ channel, userId }: { channel: any, userId: string }) {
-        if (channel?.notificationSubscribers?.includes(userId)) {
-            await this.removeChannelFromUser({ channelId: channel._id, userId })
-            await this.removeChannelNotificationSubscriber({
-                channelId: channel._id,
-                userId
-            })
-        } else {
-            await this.addChannelToUser({ channelId: channel._id })
-            await this.addChannelNotificationSubscriber({
-                channelId: channel._id,
-                userId
-            })
+            currentChannel.set(null)
         }
-    }
+    })
+}
 
-    // async sendToken({ channelId }) {
-    //     await lastValueFrom(this.http
-    //         .get(`${env.PUBLIC_API_URL}/token/sendToken?channelId=${channelId}`, {
-    //             responseType: 'text'
-    //         })).then((res) => {
-    //             return this.snackBar.open('You received 1 recursion Token', null, {
-    //                 duration: 2500
-    //             })
-    //         }).catch((err) => {
-    //             console.log('Err', err)
-    //         })
-    // }
+async function enterChannel({ channel }: { channel: any }) {
+    currentChannel.set(channel)
+    return currentChannel
+}
 
-    // async getTechList() {
-    //     if (this.techList.length < 1) {
-    //         const web2Assets: any = await lastValueFrom(this.http
-    //             .get(`${environment.hostUrl}/assets/images/web2/_categoryWeb2.json`))
-    //         const web3Assets: any = await lastValueFrom(this.http
-    //             .get(`${environment.hostUrl}/assets/images/web3/_categoryWeb3.json`))
-    //         const gameAssets: any = await lastValueFrom(this.http
-    //             .get(`${environment.hostUrl}/assets/images/games/_categoryGames.json`))
-    //         web3Assets.forEach((file) => {
-    //             let fileName = file.item_image.substring(file.item_image.lastIndexOf('/') + 1)
-    //             fileName = fileName.substring(0, fileName.indexOf('.'))
-    //             const nameAndTickerList = fileName.split('-')
-    //             const ticker = nameAndTickerList.pop().toUpperCase()
-    //             const fullName = nameAndTickerList
-    //                 .map((name) => name.charAt(0).toUpperCase() + name.slice(1))
-    //                 .join(' ')
-    //             file.item_text = `${fullName} (${ticker})`
-    //         })
-    //         web2Assets.push(...web3Assets)
-    //         gameAssets.forEach((file) => {
-    //             let fileName = file.item_image.substring(file.item_image.lastIndexOf('/') + 1)
-    //             fileName = fileName.substring(0, fileName.indexOf('.'))
-    //             const nameSplitList = fileName.split('-')
-    //             const fullName = nameSplitList
-    //                 .map((name) => name.charAt(0).toUpperCase() + name.slice(1))
-    //                 .join(' ')
-    //             file.item_text = fullName
-    //         })
-    //         web2Assets.push(...gameAssets)
-    //         this.techList = web2Assets
-    //         this.techList.sort((a, b) => a.item_text.localeCompare(b.item_text))
-    //     }
-    // }
+async function toggleNotifications({ channel, userId }: { channel: any, userId: string }) {
+    if (channel?.notificationSubscribers?.includes(userId)) {
+        await removeChannelFromUser({ channelId: channel._id, userId })
+        await removeChannelNotificationSubscriber({
+            channelId: channel._id,
+            userId
+        })
+    } else {
+        await addChannelToUser({ channelId: channel._id })
+        await addChannelNotificationSubscriber({
+            channelId: channel._id,
+            userId
+        })
+    }
 }
 
+// async sendToken({ channelId }) {
+//     await lastValueFrom(this.http
+//         .get(`${env.PUBLIC_API_URL}/token/sendToken?channelId=${channelId}`, {
+//             responseType: 'text'
+//         })).then((res) => {
+//             return this.snackBar.open('You received 1 recursion Token', null, {
+//                 duration: 2500
+//             })
+//         }).catch((err) => {
+//             console.log('Err', err)
+//         })
+// }
+
+// async getTechList() {
+//     if (this.techList.length < 1) {
+//         const web2Assets: any = await lastValueFrom(this.http
+//             .get(`${environment.hostUrl}/assets/images/web2/_categoryWeb2.json`))
+//         const web3Assets: any = await lastValueFrom(this.http
+//             .get(`${environment.hostUrl}/assets/images/web3/_categoryWeb3.json`))
+//         const gameAssets: any = await lastValueFrom(this.http
+//             .get(`${environment.hostUrl}/assets/images/games/_categoryGames.json`))
+//         web3Assets.forEach((file) => {
+//             let fileName = file.item_image.substring(file.item_image.lastIndexOf('/') + 1)
+//             fileName = fileName.substring(0, fileName.indexOf('.'))
+//             const nameAndTickerList = fileName.split('-')
+//             const ticker = nameAndTickerList.pop().toUpperCase()
+//             const fullName = nameAndTickerList
+//                 .map((name) => name.charAt(0).toUpperCase() + name.slice(1))
+//                 .join(' ')
+//             file.item_text = `${fullName} (${ticker})`
+//         })
+//         web2Assets.push(...web3Assets)
+//         gameAssets.forEach((file) => {
+//             let fileName = file.item_image.substring(file.item_image.lastIndexOf('/') + 1)
+//             fileName = fileName.substring(0, fileName.indexOf('.'))
+//             const nameSplitList = fileName.split('-')
+//             const fullName = nameSplitList
+//                 .map((name) => name.charAt(0).toUpperCase() + name.slice(1))
+//                 .join(' ')
+//             file.item_text = fullName
+//         })
+//         web2Assets.push(...gameAssets)
+//         this.techList = web2Assets
+//         this.techList.sort((a, b) => a.item_text.localeCompare(b.item_text))
+//     }
+// }
+
 export {
-    
+    createChannel,
+    deleteChannel,
+    getChannel,
+    addChannelToUser,
+    removeChannelFromUser,
+    addHostChannelToUser,
+    removeHostChannelFromUser,
+    blockUserFromChannel,
+    unblockUserFromChannel,
+    updateChannelProperties,
+    addAttachments,
+    deleteAttachment,
+    addChannelNotificationSubscriber,
+    removeChannelNotificationSubscriber,
+    deleteMembers,
+    getInitialChannels,
+    getMyChannels,
+    getChannelsByUserId,
+    getChannels,
+    searchChannels,
+    leaveChannel,
+    enterChannel,
+    toggleNotifications
 }
\ No newline at end of file
diff --git a/src/lib/stores/chatStore.ts b/src/lib/stores/chatStore.ts
index bc045011..8df20b85 100644
--- a/src/lib/stores/chatStore.ts
+++ b/src/lib/stores/chatStore.ts
@@ -1,102 +1,81 @@
 import { writable, type Writable } from 'svelte/store'
-import { socketStore } from '$lib/stores/socketStore'
+import { emitDeleteMessageToChannel, emitDeleteAllMessagesToChannel, emitHistoryToChannel, emitMessageToChannel, emitChatMessage, emitChatTypingByUser, emitChannelChatTypingByUser } from '$lib/stores/socketStore'
 import { env } from '$env/dynamic/public'
-// import { currentUser } from './userStore'
-// import { currentChannel } from './channelStore'
-
-class ChatStore {
-    public lastMessageSendDate: Date = new Date()
-    private skip = 0
-    private limit = 100
-
-    constructor(
-        public searchQuery: Writable<string> = writable(''),
-        public chats: Writable<[]> = writable([]),
-        public messages: Writable<[]> = writable([]),
-        public activeTabs: Writable<[]> = writable([]),
-        public isShowingSearchResults: Writable<boolean> = writable(false),
-    ) {}
-
-    resetSkipLimit() {
-        this.skip = 0
-        this.limit = 100
-    }
-
-    deleteMessage({ message, channelId }: { message: any, channelId: string }) {
-        socketStore.emitDeleteMessageToChannel({ channelId, message: JSON.stringify(message) })
-    }
+import { currentUser } from './authStore'
+import { currentChannel } from './channelStore'
+
+let lastMessageSendDate: Date = new Date()
+let skip = 0
+let limit = 100
+
+export const searchQuery: Writable<string> = writable('')
+export const chats: Writable<[]> = writable([])
+export const messages: Writable<[]> = writable([])
+export const activeTabs: Writable<[]> = writable([])
+export const isShowingSearchResults: Writable<boolean> = writable(false)
+
+function resetSkipLimit() {
+    skip = 0
+    limit = 100
+}
 
-    deleteAllMessages({ channelId }: { channelId: string }) {
-        socketStore.emitDeleteAllMessagesToChannel({ channelId })
-    }
+function deleteMessage({ message, channelId }: { message: any, channelId: string }) {
+    emitDeleteMessageToChannel({ channelId, message: JSON.stringify(message) })
+}
 
-    public async postFile({ channelId, fileToUpload }: { channelId: string, fileToUpload: File }) {
-        const formData: FormData = new FormData()
-        formData.append('file', fileToUpload, fileToUpload.name)
-        formData.append('channelId', channelId)
-        formData.append('name', fileToUpload.name)
-        formData.append('type', fileToUpload.type)
-        return await fetch(`${env.PUBLIC_API_URL}/attachments/file`, { method: 'POST', body: JSON.stringify(formData) })
-    }
+function deleteAllMessages({ channelId }: { channelId: string }) {
+    emitDeleteAllMessagesToChannel({ channelId })
+}
 
-    public async deleteFile({ key }: { key: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/attachments/file?key=${key}`, {
-            method: 'DELETE'
-        })
-    }
+async function postFile({ channelId, fileToUpload }: { channelId: string, fileToUpload: File }) {
+    const formData: FormData = new FormData()
+    formData.append('file', fileToUpload, fileToUpload.name)
+    formData.append('channelId', channelId)
+    formData.append('name', fileToUpload.name)
+    formData.append('type', fileToUpload.type)
+    return await fetch(`${env.PUBLIC_API_URL}/attachments/file`, { method: 'POST', body: JSON.stringify(formData) })
+}
 
-    public async getTrendingGifs() {
-        return await fetch(`${env.PUBLIC_API_URL}/giphy/trending`, {
-            method: 'GET'
-        }).then(response => response.json())
-    }
+async function deleteFile({ key }: { key: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/attachments/file?key=${key}`, {
+        method: 'DELETE'
+    })
+}
 
-    public async searchGifs({ query }: { query: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/giphy/search?${query}`, {
-            method: 'GET'
-        }).then(response => response.json())
-    }
+async function getTrendingGifs() {
+    return await fetch(`${env.PUBLIC_API_URL}/giphy/trending`, {
+        method: 'GET'
+    }).then(response => response.json())
+}
 
-    public async getMessages({ chat, chatType }: { chat: any, chatType: string }) {
-        const data = { limit: this.limit, skip: 0 }
-        if (chatType == 'channelChat') {
-            this.skip = this.skip + this.limit
-            data.skip = this.skip
-            socketStore.emitHistoryToChannel({ channelId: chat.channel, skip: data.skip })
-        } else if (chatType == 'oneToOneChat') {
-            data.skip = chat.skip
-        }
-    }
+async function searchGifs({ query }: { query: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/giphy/search?${query}`, {
+        method: 'GET'
+    }).then(response => response.json())
+}
 
-    public async sendChannelMessage({ channel, attributes }: { channel: any, attributes: any }) {
-        const dateNow = new Date()
-        const diff = Math.round(
-            Math.abs((dateNow.getTime() - this.lastMessageSendDate.getTime()) / 1000)
-        )
-        if (diff <= 0.7) {
-            //TODO: show alert
-            // this.snackBar.open('Please be courteous to other users', null, {
-            //     duration: 1000
-            // })
-        } else {
-            //TODO: get currentUser
-            const user: any = null
-            attributes.userId = user._id
-            attributes.avatar = user.avatar
-            const completeMessage = {
-                attributes: attributes,
-                body: attributes.text,
-                state: { timestamp: new Date().toISOString() },
-                user: user,
-                author: user.displayName
-            }
-            socketStore.emitMessageToChannel({ channelId: channel._id, message: completeMessage })
-            this.lastMessageSendDate = new Date()
-            // this.sendEmailAndWebNotifications({ channel: channel._id, user, attributes })
-        }
+async function getMessages({ chat, chatType }: { chat: any, chatType: string }) {
+    const data = { limit: limit, skip: 0 }
+    if (chatType == 'channelChat') {
+        skip = skip + limit
+        data.skip = skip
+        emitHistoryToChannel({ channelId: chat.channel, skip: data.skip })
+    } else if (chatType == 'oneToOneChat') {
+        data.skip = chat.skip
     }
+}
 
-    public async sendChatMessage({ chat, attributes }: { chat: any, attributes: any }) {
+async function sendChannelMessage({ channel, attributes }: { channel: any, attributes: any }) {
+    const dateNow = new Date()
+    const diff = Math.round(
+        Math.abs((dateNow.getTime() - lastMessageSendDate.getTime()) / 1000)
+    )
+    if (diff <= 0.7) {
+        //TODO: show alert
+        // snackBar.open('Please be courteous to other users', null, {
+        //     duration: 1000
+        // })
+    } else {
         //TODO: get currentUser
         const user: any = null
         attributes.userId = user._id
@@ -108,290 +87,336 @@ class ChatStore {
             user: user,
             author: user.displayName
         }
-        socketStore.emitChatMessage({ source1: chat.source1, source2: chat.source2, message: completeMessage })
-        this.lastMessageSendDate = new Date()
-        // this.sendEmailAndWebNotifications({ channel: chat._id, user, attributes })
+        emitMessageToChannel({ channelId: channel._id, message: completeMessage })
+        lastMessageSendDate = new Date()
+        // sendEmailAndWebNotifications({ channel: channel._id, user, attributes })
     }
+}
 
-    // public async sendEmailAndWebNotifications({ channel, user, attributes }: { channel: any, user: any, attributes: any }) {
-    //     let notificationSubscribers = []
-    //     notificationSubscribers = channel?.notificationSubscribers?.filter((id: any) =>
-    //         id == user._id ? false : true
-    //     )
-    //     if (notificationSubscribers?.length) {
-    //         const sendNotificationsTo: any[] = []
-    //         // const sendEmailsTo = []
-    //         notificationSubscribers = await userStore.getUsersByIds(notificationSubscribers)
-    //         notificationSubscribers.forEach((user: any) => {
-    //             if (user.isWebNotificationsEnabled) sendNotificationsTo.push(user._id)
-    //             // if (user.isEmailNotificationsEnabled) sendEmailsTo.push(user._id)
-    //         })
-    //         const body = `${user.customUsername}: ${attributes.text}`
-    //         const title = `New message at ${channel.title}`
-    //         const sendToList = []
-    //         // if (sendNotificationsTo.length) {
-    //         //     sendToList.push(
-    //         //         this.notificationService.sendWebNotifications({
-    //         //             body,
-    //         //             title,
-    //         //             userIds: sendNotificationsTo
-    //         //         })
-    //         //     )
-    //         // }
-    //         // if (sendEmailsTo.length) {
-    //         //   sendToList.push(this.notificationService.sendEmails({
-    //         //     subject: `Chat notification from codecrow.io`, message: body, name: channel.title, userIds: sendEmailsTo, url: `${environment.hostUrl}/channel/${channel._id}`
-    //         //   }))
-    //         // }
-    //         return Promise.all(sendToList)
-    //     } else {
-    //         return Promise.resolve()
-    //     }
-    // }
-
-    emitChannelChatTypingByUser({ typingUser, channelId = '' }: { typingUser: any, channelId: string }) {
-        if (!channelId) {
-            socketStore.emitChatTypingByUser(typingUser)
-        } else {
-            socketStore.emitChannelChatTypingByUser({ channelId, typingUser })
-        }
+async function sendChatMessage({ chat, attributes }: { chat: any, attributes: any }) {
+    //TODO: get currentUser
+    const user: any = null
+    attributes.userId = user._id
+    attributes.avatar = user.avatar
+    const completeMessage = {
+        attributes: attributes,
+        body: attributes.text,
+        state: { timestamp: new Date().toISOString() },
+        user: user,
+        author: user.displayName
     }
+    emitChatMessage({ source1: chat.source1, source2: chat.source2, message: completeMessage })
+    lastMessageSendDate = new Date()
+    // sendEmailAndWebNotifications({ channel: chat._id, user, attributes })
+}
 
-    public async createChat({ source1, source2 }: { source1: string, source2: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/chats`, {
-            method: 'PUT',
-            body: JSON.stringify({ source1, source2 }),
-        }).then(async response => {
-            const res = await response.json()
-            //TODO: fix array push to writable
-            // this.chats.subscribe((value: any) => {
-            //     const doesChatExist = value.some((cht: any) => res._id === cht._id)
-            //     if (!doesChatExist) value.push(res)
-            //     return res
-            // })
-        })
+// async function sendEmailAndWebNotifications({ channel, user, attributes }: { channel: any, user: any, attributes: any }) {
+//     let notificationSubscribers = []
+//     notificationSubscribers = channel?.notificationSubscribers?.filter((id: any) =>
+//         id == user._id ? false : true
+//     )
+//     if (notificationSubscribers?.length) {
+//         const sendNotificationsTo: any[] = []
+//         // const sendEmailsTo = []
+//         notificationSubscribers = await userStore.getUsersByIds(notificationSubscribers)
+//         notificationSubscribers.forEach((user: any) => {
+//             if (user.isWebNotificationsEnabled) sendNotificationsTo.push(user._id)
+//             // if (user.isEmailNotificationsEnabled) sendEmailsTo.push(user._id)
+//         })
+//         const body = `${user.customUsername}: ${attributes.text}`
+//         const title = `New message at ${channel.title}`
+//         const sendToList = []
+//         // if (sendNotificationsTo.length) {
+//         //     sendToList.push(
+//         //         notificationService.sendWebNotifications({
+//         //             body,
+//         //             title,
+//         //             userIds: sendNotificationsTo
+//         //         })
+//         //     )
+//         // }
+//         // if (sendEmailsTo.length) {
+//         //   sendToList.push(notificationService.sendEmails({
+//         //     subject: `Chat notification from codecrow.io`, message: body, name: channel.title, userIds: sendEmailsTo, url: `${environment.hostUrl}/channel/${channel._id}`
+//         //   }))
+//         // }
+//         return Promise.all(sendToList)
+//     } else {
+//         return Promise.resolve()
+//     }
+// }
+
+function emitChannelChatTyping({ typingUser, channelId = '' }: { typingUser: any, channelId: string }) {
+    if (!channelId) {
+        emitChatTypingByUser(typingUser)
+    } else {
+        emitChannelChatTypingByUser({ channelId, typingUser })
     }
+}
 
-    public async getChat({ source1, source2 }: { source1: string, source2: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/chats/me?source1=${source1}&source2=${source2}`, {
-            method: 'GET'
-        }).then(response => response.json())
-    }
+async function createChat({ source1, source2 }: { source1: string, source2: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/chats`, {
+        method: 'PUT',
+        body: JSON.stringify({ source1, source2 }),
+    }).then(async response => {
+        const res = await response.json()
+        //TODO: fix array push to writable
+        // chats.subscribe((value: any) => {
+        //     const doesChatExist = value.some((cht: any) => res._id === cht._id)
+        //     if (!doesChatExist) value.push(res)
+        //     return res
+        // })
+    })
+}
 
-    public async getChats(isRefresh = false) {
-        if (isRefresh) {
-            this.chats.set([])
-            this.resetSkipLimit()
-        }
-        return await fetch(`${env.PUBLIC_API_URL}/chats?searchQuery=${this.searchQuery}&skip=${this.skip}&limit=${this.limit}`, {
-            method: 'GET'
-        }).then(async response => {
-            const res = await response.json()
-            //TODO: fix array push to writable
-            // if (chats.length) {
-            //     this.skip += this.limit
-            //     this.chats.push(...chats)
-            // } else {
-            //TODO: show alert
-            // if (this.searchQuery && !this.skip)
-            //     this.snackBar.open('No results with the search criteria', null, {
-            //         duration: 2000
-            //     })
-            // }
-            // return this.chats
-        })
-    }
+async function getChat({ source1, source2 }: { source1: string, source2: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/chats/me?source1=${source1}&source2=${source2}`, {
+        method: 'GET'
+    }).then(response => response.json())
+}
 
-    public async deleteChat({ chat }: { chat: any }) {
-        // const dialogData: DialogData = {
-        //     title: 'Delete Chat',
-        //     message: 'Are you sure you want to delete this chat?',
-        //     okText: 'Yes',
-        //     cancelText: 'Cancel'
+async function getChats(isRefresh = false) {
+    if (isRefresh) {
+        chats.set([])
+        resetSkipLimit()
+    }
+    return await fetch(`${env.PUBLIC_API_URL}/chats?searchQuery=${searchQuery}&skip=${skip}&limit=${limit}`, {
+        method: 'GET'
+    }).then(async response => {
+        const res = await response.json()
+        //TODO: fix array push to writable
+        // if (chats.length) {
+        //     skip += limit
+        //     chats.push(...chats)
+        // } else {
+        //TODO: show alert
+        // if (searchQuery && !skip)
+        //     snackBar.open('No results with the search criteria', null, {
+        //         duration: 2000
+        //     })
         // }
+        // return chats
+    })
+}
 
-        // const dialogRef = this.dialogService.openDialog(dialogData, {
-        //     disableClose: true
-        // })
-
-        // dialogRef.afterClosed().subscribe(async (result: any) => {
-        //     if (result) {
-        await fetch(`${env.PUBLIC_API_URL}/chats?chatId=${chat._id}`, {
-            method: 'DELETE'
-        }).then(async response => {
-            await response.json()
-            //TODO: fix array filter to writable
-            // this.chats.set(this.chats.filter((cht) => cht.chat._id !== chat._id))
-        })
-        //     }
-        // })
-    }
+async function deleteChat({ chat }: { chat: any }) {
+    // const dialogData: DialogData = {
+    //     title: 'Delete Chat',
+    //     message: 'Are you sure you want to delete this chat?',
+    //     okText: 'Yes',
+    //     cancelText: 'Cancel'
+    // }
 
-    public async updateChatProperties({ chatId, updatedProperties }: { chatId: string, updatedProperties: any }) {
-        return await fetch(`${env.PUBLIC_API_URL}/chats?chatId=${chatId}`, {
-            method: 'PATCH', body: JSON.stringify(updatedProperties)
-        }).then(response => response.json())
-    }
+    // const dialogRef = dialogService.openDialog(dialogData, {
+    //     disableClose: true
+    // })
+
+    // dialogRef.afterClosed().subscribe(async (result: any) => {
+    //     if (result) {
+    await fetch(`${env.PUBLIC_API_URL}/chats?chatId=${chat._id}`, {
+        method: 'DELETE'
+    }).then(async response => {
+        await response.json()
+        //TODO: fix array filter to writable
+        // chats.set(chats.filter((cht) => cht.chat._id !== chat._id))
+    })
+    //     }
+    // })
+}
 
-    public async incrementUnreadMessageCount({ chatId }: { chatId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/chats?unread/chatId=${chatId}`, {
-            method: 'PATCH'
-        })
-    }
+async function updateChatProperties({ chatId, updatedProperties }: { chatId: string, updatedProperties: any }) {
+    return await fetch(`${env.PUBLIC_API_URL}/chats?chatId=${chatId}`, {
+        method: 'PATCH', body: JSON.stringify(updatedProperties)
+    }).then(response => response.json())
+}
 
-    public async clearUnreadMessageCount({ chatId }: { chatId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/chats?unread/chatId=${chatId}`, {
-            method: 'DELETE'
-        })
-    }
+async function incrementUnreadMessageCount({ chatId }: { chatId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/chats?unread/chatId=${chatId}`, {
+        method: 'PATCH'
+    })
+}
 
-    public async searchChats() {
-        this.chats.set([])
-        return this.getChats(true)
-    }
+async function clearUnreadMessageCount({ chatId }: { chatId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/chats?unread/chatId=${chatId}`, {
+        method: 'DELETE'
+    })
+}
 
-    public async openChat({ chat, friendGroup = null }: { chat: any, friendGroup: any }) {
-        if (friendGroup) {
-            return this.activateGroupTab(friendGroup)
-        }
-        //TODO: get writable channel id
-        // if (!chat.chat) {
-        //     const existingChat = await this.getChat({
-        //         source1: authStore.currentUser._id,
-        //         source2: chat._id
-        //     })
-        //     if (!existingChat) {
-        //         chat = await this.createChat({
-        //             source1: authStore.currentUser._id,
-        //             source2: chat._id
-        //         })
-        //     } else {
-        //         chat = existingChat
-        //     }
-        // }
-        // this.activateChatTab(chat)
-        // socketStore.emitChatMessage({
-        //     source1: authStore.currentUser._id,
-        //     source2: chat._id,
-        //     message: "incoming message"
-        // })
+async function searchChats() {
+    chats.set([])
+    return getChats(true)
+}
 
+async function openChat({ chat, friendGroup = null }: { chat: any, friendGroup: any }) {
+    if (friendGroup) {
+        return activateGroupTab(friendGroup)
     }
+    //TODO: get writable channel id
+    // if (!chat.chat) {
+    //     const existingChat = await getChat({
+    //         source1: authStore.currentUser._id,
+    //         source2: chat._id
+    //     })
+    //     if (!existingChat) {
+    //         chat = await createChat({
+    //             source1: authStore.currentUser._id,
+    //             source2: chat._id
+    //         })
+    //     } else {
+    //         chat = existingChat
+    //     }
+    // }
+    // activateChatTab(chat)
+    // socketStore.emitChatMessage({
+    //     source1: authStore.currentUser._id,
+    //     source2: chat._id,
+    //     message: "incoming message"
+    // })
 
-    public async activateChatTab({ chat }: { chat: any }) {
-        // const user = authStore.currentUser
-        if (this.checkAlreadyExist(chat)) return
-        //TODO: get writable activeTabs
-        // this.activeTabs.push(chat)
-        await this.clearUnreadMessageCount({ chatId: chat.chat._id })
-        chat.chat.unreadMessageCount = 0
-    }
+}
 
-    public async activateGroupTab({ group }: { group: any }) {
-        // const user = authStore.currentUser
-        if (this.checkAlreadyExist(group)) return
-        //TODO: get writable activeTabs
-        // socketStore.emitChannelSubscribeByUser(group.channelId, user._id)
-        // this.activeTabs.push(group)
-    }
+async function activateChatTab({ chat }: { chat: any }) {
+    // const user = authStore.currentUser
+    if (checkAlreadyExist(chat)) return
+    //TODO: get writable activeTabs
+    // activeTabs.push(chat)
+    await clearUnreadMessageCount({ chatId: chat.chat._id })
+    chat.chat.unreadMessageCount = 0
+}
 
-    checkAlreadyExist({ item }: { item: any }) {
-        //TODO: get writable currentUser
-        // const chat = this.activeTabs.find((chat) => {
-        //     if (chat._id === item._id || ((chat.source1 === item.source1 && chat.source2 === item.source2) ||
-        //         (chat.source2 === item.source1 && chat.source1 === item.source2))) {
-        //         return true
-        //     }
-        // })
-        // return (this.activeTabs.indexOf(item) !== -1) || (chat !== undefined)
-        return null
-    }
+async function activateGroupTab({ group }: { group: any }) {
+    // const user = authStore.currentUser
+    if (checkAlreadyExist(group)) return
+    //TODO: get writable activeTabs
+    // socketStore.emitChannelSubscribeByUser(group.channelId, user._id)
+    // activeTabs.push(group)
+}
 
-    public async incomingMessageActivateChatTab(data: any) {
-        // const user = authStore.currentUser
-        // const otherUser = userStore.getUserById(data.source1)
-        const chat = null
-        //TODO: get writable currentUser
-        // const existingChat = await this.getChat({
-        //     source1: authStore.currentUser._id,
-        //     source2: data.source1
-        // })
-        // if (!existingChat) {
-        //     chat = await this.createChat({
-        //         source1: authStore.currentUser._id,
-        //         source2: data.source1,
-        //         user: otherUser
-        //     })
-        // } else {
-        //     chat = existingChat
-        // }
-        // if (!user.isDoNotDisturbEnabled) {
-        //     chat.isUserRequestingToOpenChat = true
-        //     this.initIncomingMessage = data
-        //     this.activateChatTab(chat)
-        // }
-    }
+function checkAlreadyExist({ item }: { item: any }) {
+    //TODO: get writable currentUser
+    // const chat = activeTabs.find((chat) => {
+    //     if (chat._id === item._id || ((chat.source1 === item.source1 && chat.source2 === item.source2) ||
+    //         (chat.source2 === item.source1 && chat.source1 === item.source2))) {
+    //         return true
+    //     }
+    // })
+    // return (activeTabs.indexOf(item) !== -1) || (chat !== undefined)
+    return null
+}
 
-    public async blockUser({ senderId, isBlocked }: { senderId: string, isBlocked: boolean }) {
-        //TODO: get writable channel id
-        // await channelStore.blockUserFromChannel({
-        //     channelId: channelStore.currentChannel._id,
-        //     userId: senderId
-        // })
-        // await channelStore.removeChannelNotificationSubscriber({
-        //     channelId: channelStore.currentChannel._id,
-        //     userId: senderId
-        // })
-        // socketStore.emitRemovedUser(channelStore.currentChannel._id, senderId)
-        // channelStore.currentChannel.blockedUsers?.push(senderId)
-        // isBlocked = channelStore.isUserBlockedFromChannel(senderId)
-    }
+async function incomingMessageActivateChatTab(data: any) {
+    // const user = authStore.currentUser
+    // const otherUser = userStore.getUserById(data.source1)
+    const chat = null
+    //TODO: get writable currentUser
+    // const existingChat = await getChat({
+    //     source1: authStore.currentUser._id,
+    //     source2: data.source1
+    // })
+    // if (!existingChat) {
+    //     chat = await createChat({
+    //         source1: authStore.currentUser._id,
+    //         source2: data.source1,
+    //         user: otherUser
+    //     })
+    // } else {
+    //     chat = existingChat
+    // }
+    // if (!user.isDoNotDisturbEnabled) {
+    //     chat.isUserRequestingToOpenChat = true
+    //     initIncomingMessage = data
+    //     activateChatTab(chat)
+    // }
+}
 
-    public async unblockUser({ senderId, isBlocked }: { senderId: string, isBlocked: boolean }) {
-        //TODO: get writable channel id
-        // await channelStore.unblockUserFromChannel({
-        //     channelId: channelStore.currentChannel._id,
-        //     userId: senderId
-        // })
-        // channelStore.currentChannel.blockedUsers =
-        //     channelStore.currentChannel.blockedUsers?.filter(
-        //         (user) => !!(user != senderId)
-        //     )
-        // isBlocked = channelStore.isUserBlockedFromChannel(senderId)
-    }
+async function blockUser({ senderId, isBlocked }: { senderId: string, isBlocked: boolean }) {
+    //TODO: get writable channel id
+    // await channelStore.blockUserFromChannel({
+    //     channelId: channelStore.currentChannel._id,
+    //     userId: senderId
+    // })
+    // await channelStore.removeChannelNotificationSubscriber({
+    //     channelId: channelStore.currentChannel._id,
+    //     userId: senderId
+    // })
+    // socketStore.emitRemovedUser(channelStore.currentChannel._id, senderId)
+    // channelStore.currentChannel.blockedUsers?.push(senderId)
+    // isBlocked = channelStore.isUserBlockedFromChannel(senderId)
+}
 
-    public async showDeleteMessageDialog({ oneVone, message }: { oneVone: boolean, message: any }) {
-        // const dialogData: DialogData = {
-        //     title: 'Delete Message',
-        //     message: 'Are you sure you want to delete this message?',
-        //     okText: 'Yes',
-        //     cancelText: 'Cancel'
-        // }
+async function unblockUser({ senderId, isBlocked }: { senderId: string, isBlocked: boolean }) {
+    //TODO: get writable channel id
+    // await channelStore.unblockUserFromChannel({
+    //     channelId: channelStore.currentChannel._id,
+    //     userId: senderId
+    // })
+    // channelStore.currentChannel.blockedUsers =
+    //     channelStore.currentChannel.blockedUsers?.filter(
+    //         (user) => !!(user != senderId)
+    //     )
+    // isBlocked = channelStore.isUserBlockedFromChannel(senderId)
+}
 
-        // const dialogRef = this.dialogService.openDialog(dialogData, {
-        //     disableClose: true
-        // })
+async function showDeleteMessageDialog({ oneVone, message }: { oneVone: boolean, message: any }) {
+    // const dialogData: DialogData = {
+    //     title: 'Delete Message',
+    //     message: 'Are you sure you want to delete this message?',
+    //     okText: 'Yes',
+    //     cancelText: 'Cancel'
+    // }
 
-        // dialogRef.afterClosed().subscribe((result) => {
-        // if (result) {
-        //TODO: show alert
-        this.commitDeleteMessage({ oneVone, message })
-        // }
-        // })
-    }
+    // const dialogRef = dialogService.openDialog(dialogData, {
+    //     disableClose: true
+    // })
 
-    public async commitDeleteMessage({ oneVone, message }: { oneVone: boolean, message: any }) {
-        // let chan = null
-        // if (oneVone || !channelStore.currentChannel) {
-        //     chan = { _id: message.channelId } // if friend chat
-        // } else {
-        //     chan = channelStore.currentChannel // if channel chat
-        // }
-        // if (chan) {
-        //     //TODO: get writable channel id
-        //     this.deleteMessage({ message, channelId: chan._id })
-        // }
-    }
+    // dialogRef.afterClosed().subscribe((result) => {
+    // if (result) {
+    //TODO: show alert
+    commitDeleteMessage({ oneVone, message })
+    // }
+    // })
+}
+
+async function commitDeleteMessage({ oneVone, message }: { oneVone: boolean, message: any }) {
+    // let chan = null
+    // if (oneVone || !channelStore.currentChannel) {
+    //     chan = { _id: message.channelId } // if friend chat
+    // } else {
+    //     chan = channelStore.currentChannel // if channel chat
+    // }
+    // if (chan) {
+    //     //TODO: get writable channel id
+    //     deleteMessage({ message, channelId: chan._id })
+    // }
 }
 
-export const chatStore = new ChatStore()
\ No newline at end of file
+
+export {
+    deleteMessage,
+    deleteAllMessages,
+    postFile,
+    deleteFile,
+    getTrendingGifs,
+    searchGifs,
+    getMessages,
+    sendChannelMessage,
+    sendChatMessage,
+    emitChannelChatTypingByUser,
+    createChat,
+    getChat,
+    getChats,
+    deleteChat,
+    updateChatProperties,
+    incrementUnreadMessageCount,
+    clearUnreadMessageCount,
+    searchChats,
+    openChat,
+    activateChatTab,
+    activateGroupTab,
+    checkAlreadyExist,
+    incomingMessageActivateChatTab,
+    blockUser,
+    unblockUser,
+    showDeleteMessageDialog,
+    commitDeleteMessage
+}
\ No newline at end of file
diff --git a/src/lib/stores/sfxStore.ts b/src/lib/stores/sfxStore.ts
index 9462696e..07c91d59 100644
--- a/src/lib/stores/sfxStore.ts
+++ b/src/lib/stores/sfxStore.ts
@@ -16,105 +16,104 @@ export enum SoundEffect {
     UserLeftChannel = 'UserLeftChannel'
 }
 
-class SfxStore {
-    constructor(
-        public sfxList: Writable<({ key: SoundEffect; path: null; isMuted: boolean; } | { key: SoundEffect; path: string; isMuted: boolean; })[]> = writable()
-    ) {}
+export const sfxList: Writable<({ key: SoundEffect; path: null; isMuted: boolean; } | { key: SoundEffect; path: string; isMuted: boolean; })[]> = writable()
 
-    public async getAllSavedMutedSfx() {
-        return (this.sfxList.set([
-            {
-                key: SoundEffect.All,
-                path: null,
-                isMuted: await this.getIsMuted(SoundEffect.All)
-            },
-            {
-                key: SoundEffect.AskedToSpeak,
-                path: '../../assets/sfx/askedToSpeak.wav',
-                isMuted: await this.getIsMuted(SoundEffect.AskedToSpeak)
-            },
-            {
-                key: SoundEffect.ChannelUpdates,
-                path: '../../assets/sfx/channelUpdates.wav',
-                isMuted: await this.getIsMuted(SoundEffect.ChannelUpdates)
-            },
-            {
-                key: SoundEffect.FriendRequestReceived,
-                path: '../../assets/sfx/FriendRequestReceived.wav',
-                isMuted: await this.getIsMuted(SoundEffect.FriendRequestReceived)
-            },
-            {
-                key: SoundEffect.FriendRequestSend,
-                path: '../../assets/sfx/friendRequestSend.wav',
-                isMuted: await this.getIsMuted(SoundEffect.FriendRequestSend)
-            },
-            {
-                key: SoundEffect.MutedMic,
-                path: '../../assets/sfx/mutedMic.wav',
-                isMuted: await this.getIsMuted(SoundEffect.MutedMic)
-            },
-            {
-                key: SoundEffect.UnmutedMic,
-                path: '../../assets/sfx/unmutedMic.wav',
-                isMuted: await this.getIsMuted(SoundEffect.MutedMic)
-            },
-            {
-                key: SoundEffect.SentMessage,
-                path: '../../assets/sfx/sentMessage.wav',
-                isMuted: await this.getIsMuted(SoundEffect.SentMessage)
-            },
-            {
-                key: SoundEffect.ReceivedMessage,
-                path: '../../assets/sfx/receivedMessage.wav',
-                isMuted: await this.getIsMuted(SoundEffect.SentMessage)
-            },
-            {
-                key: SoundEffect.StartedSharingScreen,
-                path: '../../assets/sfx/startedSharingScreen.wav',
-                isMuted: await this.getIsMuted(SoundEffect.StartedSharingScreen)
-            },
-            {
-                key: SoundEffect.StoppedSharingScreen,
-                path: '../../assets/sfx/stoppedSharingScreen.wav',
-                isMuted: await this.getIsMuted(SoundEffect.StartedSharingScreen)
-            },
-            {
-                key: SoundEffect.UserJoinedChannel,
-                path: '../../assets/sfx/userJoinedChannel.wav',
-                isMuted: await this.getIsMuted(SoundEffect.UserJoinedChannel)
-            },
-            {
-                key: SoundEffect.UserLeftChannel,
-                path: '../../assets/sfx/userLeftChannel',
-                isMuted: await this.getIsMuted(SoundEffect.UserJoinedChannel)
-            }
-        ]))
-    }
+async function getAllSavedMutedSfx() {
+    return (sfxList.set([
+        {
+            key: SoundEffect.All,
+            path: null,
+            isMuted: await getIsMuted(SoundEffect.All)
+        },
+        {
+            key: SoundEffect.AskedToSpeak,
+            path: '../../assets/sfx/askedToSpeak.wav',
+            isMuted: await getIsMuted(SoundEffect.AskedToSpeak)
+        },
+        {
+            key: SoundEffect.ChannelUpdates,
+            path: '../../assets/sfx/channelUpdates.wav',
+            isMuted: await getIsMuted(SoundEffect.ChannelUpdates)
+        },
+        {
+            key: SoundEffect.FriendRequestReceived,
+            path: '../../assets/sfx/FriendRequestReceived.wav',
+            isMuted: await getIsMuted(SoundEffect.FriendRequestReceived)
+        },
+        {
+            key: SoundEffect.FriendRequestSend,
+            path: '../../assets/sfx/friendRequestSend.wav',
+            isMuted: await getIsMuted(SoundEffect.FriendRequestSend)
+        },
+        {
+            key: SoundEffect.MutedMic,
+            path: '../../assets/sfx/mutedMic.wav',
+            isMuted: await getIsMuted(SoundEffect.MutedMic)
+        },
+        {
+            key: SoundEffect.UnmutedMic,
+            path: '../../assets/sfx/unmutedMic.wav',
+            isMuted: await getIsMuted(SoundEffect.MutedMic)
+        },
+        {
+            key: SoundEffect.SentMessage,
+            path: '../../assets/sfx/sentMessage.wav',
+            isMuted: await getIsMuted(SoundEffect.SentMessage)
+        },
+        {
+            key: SoundEffect.ReceivedMessage,
+            path: '../../assets/sfx/receivedMessage.wav',
+            isMuted: await getIsMuted(SoundEffect.SentMessage)
+        },
+        {
+            key: SoundEffect.StartedSharingScreen,
+            path: '../../assets/sfx/startedSharingScreen.wav',
+            isMuted: await getIsMuted(SoundEffect.StartedSharingScreen)
+        },
+        {
+            key: SoundEffect.StoppedSharingScreen,
+            path: '../../assets/sfx/stoppedSharingScreen.wav',
+            isMuted: await getIsMuted(SoundEffect.StartedSharingScreen)
+        },
+        {
+            key: SoundEffect.UserJoinedChannel,
+            path: '../../assets/sfx/userJoinedChannel.wav',
+            isMuted: await getIsMuted(SoundEffect.UserJoinedChannel)
+        },
+        {
+            key: SoundEffect.UserLeftChannel,
+            path: '../../assets/sfx/userLeftChannel',
+            isMuted: await getIsMuted(SoundEffect.UserJoinedChannel)
+        }
+    ]))
+}
 
-    async getIsMuted(key: SoundEffect) {
-        return JSON.parse(window.localStorage.getItem(key) || 'false')
-    }
+async function getIsMuted(key: SoundEffect) {
+    return JSON.parse(window.localStorage.getItem(key) || 'false')
+}
 
-    // public playAudio(key: SoundEffect) {
-    //     const isMutedAll = this.sfxList.find((sfx: { key: SoundEffect; }) => sfx.key == SoundEffect.All).isMuted
-    //     const sfx = this.sfxList.find((sfx: { key: SoundEffect; }) => sfx.key == key)
-    //     if (!isMutedAll && !sfx.isMuted) {
-    //         const audio = new Audio()
-    //         const path = this.getPathFromKey(key)
-    //         audio.src = path
-    //         audio.load()
-    //         audio.play()
-    //     }
-    // }
+// public playAudio(key: SoundEffect) {
+//     const isMutedAll = sfxList.find((sfx: { key: SoundEffect; }) => sfx.key == SoundEffect.All).isMuted
+//     const sfx = sfxList.find((sfx: { key: SoundEffect; }) => sfx.key == key)
+//     if (!isMutedAll && !sfx.isMuted) {
+//         const audio = new Audio()
+//         const path = getPathFromKey(key)
+//         audio.src = path
+//         audio.load()
+//         audio.play()
+//     }
+// }
 
-    // private getPathFromKey(key: SoundEffect) {
-    //     return this.sfxList.find((sfx: { key: SoundEffect; }) => sfx.key == key).path
-    // }
+// private getPathFromKey(key: SoundEffect) {
+//     return sfxList.find((sfx: { key: SoundEffect; }) => sfx.key == key).path
+// }
 
-    // public saveIsMuted(key: SoundEffect, isMuted: boolean) {
-    //     window.localStorage.setItem(key, isMuted.toString())
-    //     this.sfxList.find((sfx: { key: SoundEffect; }) => sfx.key == key).isMuted = isMuted
-    // }
-}
+// public saveIsMuted(key: SoundEffect, isMuted: boolean) {
+//     window.localStorage.setItem(key, isMuted.toString())
+//     sfxList.find((sfx: { key: SoundEffect; }) => sfx.key == key).isMuted = isMuted
+// }
 
-export const sfxStore = new SfxStore()
\ No newline at end of file
+export {
+    getAllSavedMutedSfx,
+    getIsMuted
+}
\ No newline at end of file
diff --git a/src/lib/stores/socketStore.ts b/src/lib/stores/socketStore.ts
index 22ba2432..6259bac8 100644
--- a/src/lib/stores/socketStore.ts
+++ b/src/lib/stores/socketStore.ts
@@ -1,237 +1,234 @@
 import { env } from '$env/dynamic/public'
 import { writable, type Writable } from "svelte/store"
 
-class SocketStore {
-    public platformSocket: WebSocket | undefined
-    public channelSocket: WebSocket | undefined
-
-    constructor(
-        public platformConnection: Writable<string> = writable(),
-        public channelConnection: Writable<string> = writable(),
-        public platformMessage: Writable<MessageEvent> = writable(),
-        public channelMessage: Writable<MessageEvent> = writable(),
-    ) {}
-
-    public async getApiSocket() {
-        return await fetch(`${env.PUBLIC_API_URL}/wsinit/wsid`, {
-            method: 'GET',
-        }).then(async response => {
-            const data = await response.text()
-            await this.setupWebsocketConnection({ websocketId: data, isChannelConnection: false })
-        })
-    }
+let platformSocket: WebSocket | undefined
+let channelSocket: WebSocket | undefined
+
+export const platformConnection: Writable<string> = writable()
+export const channelConnection: Writable<string> = writable()
+export const platformMessage: Writable<MessageEvent> = writable()
+export const channelMessage: Writable<MessageEvent> = writable()
+
+async function getPlatformSocket() {
+    return await fetch(`${env.PUBLIC_API_URL}/wsinit/wsid`, {
+        method: 'GET',
+    }).then(async response => {
+        const data = await response.text()
+        await setupWebsocketConnection({ websocketId: data, isChannelConnection: false })
+    })
+}
+
+async function getChannelSocket({ channelId }: { channelId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/wsinit/channelid?channelId=${channelId}`, {
+        method: 'GET',
+    }).then(async response => {
+        const data = await response.text()
+        await setupWebsocketConnection({ websocketId: data, isChannelConnection: true })
+    })
+}
 
-    public async getChannelSocket({ channelId }: { channelId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/wsinit/channelid?channelId=${channelId}`, {
-            method: 'GET',
-        }).then(async response => {
-            const data = await response.text()
-            await this.setupWebsocketConnection({ websocketId: data, isChannelConnection: true })
+async function setupWebsocketConnection({ websocketId, isChannelConnection }: { websocketId: string, isChannelConnection: boolean }) {
+    if (!isChannelConnection) {
+        platformSocket = new WebSocket(`${env.PUBLIC_WEBSOCKET_URL}/wsinit/wsid/${websocketId}/connect`)
+        platformSocket?.addEventListener('open', (data) => {
+            console.log("socket connection open")
+            console.log(data)
+            platformConnection.set('open')
+        })
+        platformSocket?.addEventListener('message', (data) => {
+            console.log("listening to messages")
+            console.log(data)
+            platformMessage.set(data)
+        })
+        platformSocket?.addEventListener('error', (data) => {
+            console.log("socket connection error")
+            console.log(data)
+        })
+        platformSocket?.addEventListener('close', (data) => {
+            console.log("socket connection close")
+            console.log(data)
+            platformConnection.set('close')
+        })
+    } else {
+        channelSocket = new WebSocket(`${env.PUBLIC_WEBSOCKET_URL}/wsinit/channelid/${websocketId}/connect`)
+        channelSocket?.addEventListener('open', (data) => {
+            console.log("channel socket connection open")
+            console.log(data)
+            channelConnection.set('open')
+        })
+        channelSocket?.addEventListener('message', (data) => {
+            console.log("listening to messages")
+            console.log(data)
+            channelMessage.set(data)
+        })
+        channelSocket?.addEventListener('error', (data) => {
+            console.log("socket connection error")
+            console.log(data)
+        })
+        channelSocket?.addEventListener('close', (data) => {
+            console.log("socket connection close")
+            console.log(data)
+            channelConnection.set('close')
         })
     }
+}
 
-    async setupWebsocketConnection({ websocketId, isChannelConnection }: { websocketId: string, isChannelConnection: boolean }) {
-        if (!isChannelConnection) {
-            this.platformSocket = new WebSocket(`${env.PUBLIC_WEBSOCKET_URL}/wsinit/wsid/${websocketId}/connect`)
-            this.platformSocket?.addEventListener('open', (data) => {
-                console.log("socket connection open")
-                console.log(data)
-                this.platformConnection.set('open')
-            })
-            this.platformSocket?.addEventListener('message', (data) => {
-                console.log("listening to messages")
-                console.log(data)
-                this.platformMessage.set(data)
-            })
-            this.platformSocket?.addEventListener('error', (data) => {
-                console.log("socket connection error")
-                console.log(data)
-            })
-            this.platformSocket?.addEventListener('close', (data) => {
-                console.log("socket connection close")
-                console.log(data)
-                this.platformConnection.set('close')
-            })
-        } else {
-            this.channelSocket = new WebSocket(`${env.PUBLIC_WEBSOCKET_URL}/wsinit/channelid/${websocketId}/connect`)
-            this.channelSocket?.addEventListener('open', (data) => {
-                console.log("channel socket connection open")
-                console.log(data)
-                this.channelConnection.set('open')
-            })
-            this.channelSocket?.addEventListener('message', (data) => {
-                console.log("listening to messages")
-                console.log(data)
-                this.channelMessage.set(data)
-            })
-            this.channelSocket?.addEventListener('error', (data) => {
-                console.log("socket connection error")
-                console.log(data)
-            })
-            this.channelSocket?.addEventListener('close', (data) => {
-                console.log("socket connection close")
-                console.log(data)
-                this.channelConnection.set('close')
-            })
-        }
-    }
+function emitUserConnection({ userId, isOnline }: { userId: string, isOnline: boolean }) {
+    platformSocket?.send(JSON.stringify({ eventName: isOnline ? 'user-connect' : 'user-disconnect', userId: userId }))
+}
 
-    async emitUserConnection({ userId, isOnline }: { userId: string, isOnline: boolean }) {
-        this.platformSocket?.send(JSON.stringify({ eventName: isOnline ? 'user-connect' : 'user-disconnect', userId: userId }))
-    }
+function emitRemovedUser({ channelId, userId }: { channelId: string, userId: string }) {
+    channelSocket?.send(JSON.stringify({ eventName: `user-removed`, channelId, userId }))
+}
 
-    emitRemovedUser({ channelId, userId }: { channelId: string, userId: string }) {
-        this.channelSocket?.send(JSON.stringify({ eventName: `user-removed`, channelId, userId }))
-    }
+function emitChannelUpdate({ channelId }: { channelId: string }) {
+    channelSocket?.send(JSON.stringify({ eventName: `channel-update`, channelId }))
+}
 
-    emitChannelUpdate({ channelId }: { channelId: string }) {
-        this.channelSocket?.send(JSON.stringify({ eventName: `channel-update`, channelId }))
-    }
+function emitChannelAccessRequest({ channelId, userId }: { channelId: string, userId: string }) {
+    platformSocket?.send(JSON.stringify({ eventName: `channel-access-request`, channel: channelId, user: userId }))
+}
 
-    emitChannelAccessRequest({ channelId, userId }: { channelId: string, userId: string }) {
-        this.platformSocket?.send(JSON.stringify({ eventName: `channel-access-request`, channel: channelId, user: userId }))
-    }
+function emitChannelAccessResponse({ channelId, userId, isGrantedAccess }: { channelId: string, userId: string, isGrantedAccess: boolean }) {
+    platformSocket?.send(JSON.stringify({ eventName: `channel-access-response`, channel: channelId, user: userId, isGrantedAccess }))
+}
 
-    emitChannelAccessResponse({ channelId, userId, isGrantedAccess }: { channelId: string, userId: string, isGrantedAccess: boolean }) {
-        this.platformSocket?.send(JSON.stringify({ eventName: `channel-access-response`, channel: channelId, user: userId, isGrantedAccess }))
-    }
+/************ Recording ****************/
 
-    /************ Recording ****************/
+function emitVideoRecordingStarted({ channelId }: { channelId: string }) {
+    platformSocket?.send(JSON.stringify({ eventName: `video-recording-started`, channelId }))
+}
 
-    emitVideoRecordingStarted({ channelId }: { channelId: string }) {
-        this.platformSocket?.send(JSON.stringify({ eventName: `video-recording-started`, channelId }))
-    }
+function emitVideoRecordingEnded({ channelId, sessionCounter }: { channelId: string, sessionCounter: number }) {
+    platformSocket?.send(
+        JSON.stringify({ eventName: 'video-recording-ended', channelId, sessionCounter })
+    )
+}
 
-    emitVideoRecordingEnded({ channelId, sessionCounter }: { channelId: string, sessionCounter: number }) {
-        this.platformSocket?.send(
-            JSON.stringify({ eventName: 'video-recording-ended', channelId, sessionCounter })
-        )
-    }
+function emitCompositionDeleted({ channelId, compositionSid }: { channelId: string, compositionSid: string }) {
+    platformSocket?.send(
+        JSON.stringify({ eventName: 'composition-deleted', channelId, compositionSid })
+    )
+}
 
-    emitCompositionDeleted({ channelId, compositionSid }: { channelId: string, compositionSid: string }) {
-        this.platformSocket?.send(
-            JSON.stringify({ eventName: 'composition-deleted', channelId, compositionSid })
-        )
-    }
+/************ Chat ****************/
 
-    /************ Chat ****************/
+function emitChatMessage({ source1, source2, message }: { source1: string, source2: string, message: any }) {
+    platformSocket?.send(JSON.stringify({ eventName: `message-sent`, source1, source2, message }))
+}
 
-    emitChatMessage({ source1, source2, message }: { source1: string, source2: string, message: any }) {
-        this.platformSocket?.send(JSON.stringify({ eventName: `message-sent`, source1, source2, message }))
-    }
+function emitChatTypingByUser({ userId }: { userId: string }) {
+    platformSocket?.send(
+        JSON.stringify({
+            eventName: `chat-typing`,
+            user: userId,
+            isTyping: true
+        })
+    )
+}
 
-    emitChatTypingByUser({ userId }: { userId: string }) {
-        this.platformSocket?.send(
-            JSON.stringify({
-                eventName: `chat-typing`,
-                user: userId,
-                isTyping: true
-            })
-        )
-    }
+/************ Channel chat ****************/
+
+// listenToChannel(channelId): Observable<any> {
+//     return new Observable((observer) => {
+//         channelSocket?.addEventListener(`message`, (data) => {
+//             const parsedData = JSON.parse(data.data)
+//             switch (parsedData.eventName) {
+//                 case `channel-message-${channelId}`:
+//                     observer.next(JSON.parse(parsedData))
+//                     break
+//             }
+//         })
+//     })
+// }
+
+function emitChannelSubscribeByUser({ channelId, userId }: { channelId: string, userId: string }) {
+    channelSocket?.send(
+        JSON.stringify({
+            eventName: `channel-subscribe`,
+            channel: channelId,
+            userId: userId
+        })
+    )
+}
 
-    /************ Channel chat ****************/
-
-    // listenToChannel(channelId): Observable<any> {
-    //     return new Observable((observer) => {
-    //         this.channelSocket?.addEventListener(`message`, (data) => {
-    //             const parsedData = JSON.parse(data.data)
-    //             switch (parsedData.eventName) {
-    //                 case `channel-message-${channelId}`:
-    //                     observer.next(JSON.parse(parsedData))
-    //                     break
-    //             }
-    //         })
-    //     })
-    // }
-
-    emitChannelSubscribeByUser({ channelId, userId }: { channelId: string, userId: string }) {
-        this.channelSocket?.send(
-            JSON.stringify({
-                eventName: `channel-subscribe`,
-                channel: channelId,
-                userId: userId
-            })
-        )
-    }
+function emitMessageToChannel({ channelId, message }: { channelId: string, message: any }) {
+    channelSocket?.send(
+        JSON.stringify({ eventName: `channel-message`, channel: channelId, message })
+    )
+}
 
-    emitMessageToChannel({ channelId, message }: { channelId: string, message: any }) {
-        this.channelSocket?.send(
-            JSON.stringify({ eventName: `channel-message`, channel: channelId, message })
-        )
-    }
+function emitDeleteMessageToChannel({ channelId, message }: { channelId: string, message: string }) {
+    channelSocket?.send(
+        JSON.stringify({
+            eventName: `delete-channel-message`,
+            channel: channelId,
+            message
+        })
+    )
+}
 
-    emitDeleteMessageToChannel({ channelId, message }: { channelId: string, message: string }) {
-        this.channelSocket?.send(
-            JSON.stringify({
-                eventName: `delete-channel-message`,
-                channel: channelId,
-                message
-            })
-        )
-    }
+function emitDeleteAllMessagesToChannel({ channelId }: { channelId: string }) {
+    channelSocket?.send(
+        JSON.stringify({ eventName: `delete-all-channel-messages`, channel: channelId })
+    )
+}
 
-    emitDeleteAllMessagesToChannel({ channelId }: { channelId: string }) {
-        this.channelSocket?.send(
-            JSON.stringify({ eventName: `delete-all-channel-messages`, channel: channelId })
-        )
-    }
+function emitHistoryToChannel({ channelId, skip }: { channelId: string, skip: number }) {
+    channelSocket?.send(
+        JSON.stringify({
+            eventName: `channel-message-history`,
+            channel: channelId,
+            skip
+        })
+    )
+}
 
-    emitHistoryToChannel({ channelId, skip }: { channelId: string, skip: number }) {
-        this.channelSocket?.send(
-            JSON.stringify({
-                eventName: `channel-message-history`,
-                channel: channelId,
-                skip
-            })
-        )
-    }
+function emitChannelChatTypingByUser({ channelId, typingUser }: { channelId: string, typingUser: string }) {
+    channelSocket?.send(
+        JSON.stringify({
+            eventName: `channel-chat-typing`,
+            channel: channelId,
+            typingUser
+        })
+    )
+}
 
-    emitChannelChatTypingByUser({ channelId, typingUser }: { channelId: string, typingUser: string }) {
-        this.channelSocket?.send(
-            JSON.stringify({
-                eventName: `channel-chat-typing`,
-                channel: channelId,
-                typingUser
-            })
-        )
-    }
+/************ Channel streaming ****************/
 
-    /************ Channel streaming ****************/
-
-    emitRoomMemberUpdate({ channelId, userData, isNewUser }: { channelId: string, userData: any, isNewUser: boolean }) {
-        this.channelSocket?.send(
-            JSON.stringify({
-                eventName: 'channel-streaming-room-member-update',
-                channel: channelId,
-                userData,
-                isNewUser
-            })
-        )
-    }
+function emitRoomMemberUpdate({ channelId, userData, isNewUser }: { channelId: string, userData: any, isNewUser: boolean }) {
+    channelSocket?.send(
+        JSON.stringify({
+            eventName: 'channel-streaming-room-member-update',
+            channel: channelId,
+            userData,
+            isNewUser
+        })
+    )
+}
 
-    emitUserActions({ channelId, userData, message }: { channelId: string, userData: any, message: string }) {
-        this.channelSocket?.send(
-            JSON.stringify({
-                eventName: `channel-streaming-user-actions`,
-                channel: channelId,
-                userData,
-                message
-            })
-        )
-    }
+function emitUserActions({ channelId, userData, message }: { channelId: string, userData: any, message: string }) {
+    channelSocket?.send(
+        JSON.stringify({
+            eventName: `channel-streaming-user-actions`,
+            channel: channelId,
+            userData,
+            message
+        })
+    )
+}
 
-    emitReactToMessage({ channelId, message, user, reaction }: { channelId: string, message: any, user: any, reaction: string }) {
-        this.channelSocket?.send(
-            JSON.stringify({
-                eventName: `react-to-message`,
-                channel: channelId,
-                message,
-                user,
-                reaction
-            })
-        )
-    }
+function emitReactToMessage({ channelId, message, user, reaction }: { channelId: string, message: any, user: any, reaction: string }) {
+    channelSocket?.send(
+        JSON.stringify({
+            eventName: `react-to-message`,
+            channel: channelId,
+            message,
+            user,
+            reaction
+        })
+    )
+}
 
 
 
@@ -241,136 +238,157 @@ class SocketStore {
 
 
 
-    //TODO: place these everywhere we are using socket listeners
+//TODO: place these everywhere we are using socket listeners
 
-    listenToUserConnection({ userId }: { userId: string }) {
-        this.platformMessage.subscribe(value => {
-            const parsedData = JSON.parse(value.data)
-            if (parsedData.eventName === `user-connection-${userId}`) {
-                //parsedData.user
-            }
-        })
-    }
+function listenToUserConnection({ userId }: { userId: string }) {
+    platformMessage.subscribe(value => {
+        const parsedData = JSON.parse(value.data)
+        if (parsedData.eventName === `user-connection-${userId}`) {
+            //parsedData.user
+        }
+    })
+}
 
-    listenToRemovedUser({ channelId }: { channelId: string }) {
-        this.channelMessage.subscribe(value => {
-            const parsedData = JSON.parse(value.data)
-            if (parsedData.eventName === `user-removed-${channelId}`) {
-                //parsedData.userId
-            }
-        })
-    }
+function listenToRemovedUser({ channelId }: { channelId: string }) {
+    channelMessage.subscribe(value => {
+        const parsedData = JSON.parse(value.data)
+        if (parsedData.eventName === `user-removed-${channelId}`) {
+            //parsedData.userId
+        }
+    })
+}
 
-    listenToChannelUpdate({ channelId }: { channelId: string }) {
-        this.channelMessage.subscribe(value => {
-            const parsedData = JSON.parse(value.data)
-            if (parsedData.eventName === `channel-update-${channelId}`) {
-                // this.channelService.currentChannel.description = parsedData.channel.description
-                // this.channelService.currentChannel.thumbnail = parsedData.channel.thumbnail
-                // this.channelService.currentChannel.isPrivate = parsedData.channel.isPrivate
-                // this.channelService.currentChannel.attachments = parsedData.channel.attachments
-            }
-        })
-    }
+function listenToChannelUpdate({ channelId }: { channelId: string }) {
+    channelMessage.subscribe(value => {
+        const parsedData = JSON.parse(value.data)
+        if (parsedData.eventName === `channel-update-${channelId}`) {
+            // channelService.currentChannel.description = parsedData.channel.description
+            // channelService.currentChannel.thumbnail = parsedData.channel.thumbnail
+            // channelService.currentChannel.isPrivate = parsedData.channel.isPrivate
+            // channelService.currentChannel.attachments = parsedData.channel.attachments
+        }
+    })
+}
 
-    listenToChannelAccessRequest({ channelId }: { channelId: string }) {
-        this.platformMessage.subscribe(value => {
-            const parsedData = JSON.parse(value.data)
-            if (parsedData.eventName === `channel-access-request` && parsedData.channelId === channelId) {
-                console.log("parsedData", parsedData)
-            }
-        })
-    }
+function listenToChannelAccessRequest({ channelId }: { channelId: string }) {
+    platformMessage.subscribe(value => {
+        const parsedData = JSON.parse(value.data)
+        if (parsedData.eventName === `channel-access-request` && parsedData.channelId === channelId) {
+            console.log("parsedData", parsedData)
+        }
+    })
+}
 
-    listenToChannelAccessResponse({ channelId }: { channelId: string }) {
-        this.platformMessage.subscribe(value => {
-            const parsedData = JSON.parse(value.data)
-            if (parsedData.eventName === `channel-access-response` && parsedData.channelId === channelId) {
-                console.log("parsedData", parsedData)
-            }
-        })
-    }
+function listenToChannelAccessResponse({ channelId }: { channelId: string }) {
+    platformMessage.subscribe(value => {
+        const parsedData = JSON.parse(value.data)
+        if (parsedData.eventName === `channel-access-response` && parsedData.channelId === channelId) {
+            console.log("parsedData", parsedData)
+        }
+    })
+}
 
-    listenToVideoRecordingStarted({ channelId }: { channelId: string }) {
-        this.platformMessage.subscribe(value => {
-            const parsedData = JSON.parse(value.data)
-            if (parsedData.eventName === `video-recording-started` && parsedData.channelId === channelId) {
-                console.log("parsedData", parsedData)
-            }
-        })
-    }
+function listenToVideoRecordingStarted({ channelId }: { channelId: string }) {
+    platformMessage.subscribe(value => {
+        const parsedData = JSON.parse(value.data)
+        if (parsedData.eventName === `video-recording-started` && parsedData.channelId === channelId) {
+            console.log("parsedData", parsedData)
+        }
+    })
+}
 
-    listenToCompositionStatusUpdate({ channelId }: { channelId: string }) {
-        this.platformMessage.subscribe(value => {
-            const parsedData = JSON.parse(value.data)
-            if (parsedData.eventName === `composition-status-update` && parsedData.channelId === channelId) {
-                console.log("parsedData", parsedData)
-            }
-        })
-    }
+function listenToCompositionStatusUpdate({ channelId }: { channelId: string }) {
+    platformMessage.subscribe(value => {
+        const parsedData = JSON.parse(value.data)
+        if (parsedData.eventName === `composition-status-update` && parsedData.channelId === channelId) {
+            console.log("parsedData", parsedData)
+        }
+    })
+}
 
-    listenToCompositionDeleted({ channelId }: { channelId: string }) {
-        this.platformMessage.subscribe(value => {
-            const parsedData = JSON.parse(value.data)
-            if (parsedData.eventName === `composition-deleted` && parsedData.channelId === channelId) {
-                console.log("parsedData", parsedData)
-            }
-        })
-    }
+function listenToCompositionDeleted({ channelId }: { channelId: string }) {
+    platformMessage.subscribe(value => {
+        const parsedData = JSON.parse(value.data)
+        if (parsedData.eventName === `composition-deleted` && parsedData.channelId === channelId) {
+            console.log("parsedData", parsedData)
+        }
+    })
+}
 
-    listenToChatMessages() {
-        this.platformMessage.subscribe(value => {
-            const parsedData = JSON.parse(value.data)
-            if (parsedData.eventName === `message-received`) {
-                console.log("parsedData", parsedData)
-            }
-        })
-    }
+function listenToChatMessages() {
+    platformMessage.subscribe(value => {
+        const parsedData = JSON.parse(value.data)
+        if (parsedData.eventName === `message-received`) {
+            console.log("parsedData", parsedData)
+        }
+    })
+}
 
-    listenToChatTyping() {
-        this.platformMessage.subscribe(value => {
-            const parsedData = JSON.parse(value.data)
-            if (parsedData.eventName === `chat-typing`) {
-                console.log("parsedData", parsedData)
-            }
-        })
-    }
+function listenToChatTyping() {
+    platformMessage.subscribe(value => {
+        const parsedData = JSON.parse(value.data)
+        if (parsedData.eventName === `chat-typing`) {
+            console.log("parsedData", parsedData)
+        }
+    })
+}
 
-    listenToChannelMessage({ channelId }: { channelId: string }) {
-        this.channelMessage.subscribe(value => {
-            const parsedData = JSON.parse(value.data)
-            if (parsedData.eventName === `channel-message-${channelId}`) {
-                console.log("parsedData", parsedData)
-            }
-        })
-    }
+function listenToChannelMessage({ channelId }: { channelId: string }) {
+    channelMessage.subscribe(value => {
+        const parsedData = JSON.parse(value.data)
+        if (parsedData.eventName === `channel-message-${channelId}`) {
+            console.log("parsedData", parsedData)
+        }
+    })
+}
 
-    listenToChannelTyping() {
-        this.channelMessage.subscribe(value => {
-            const parsedData = JSON.parse(value.data)
-            if (parsedData.eventName === `typing`) {
-                console.log("parsedData", parsedData)
-            }
-        })
-    }
+function listenToChannelTyping() {
+    channelMessage.subscribe(value => {
+        const parsedData = JSON.parse(value.data)
+        if (parsedData.eventName === `typing`) {
+            console.log("parsedData", parsedData)
+        }
+    })
+}
 
-    listenToRoomMemberUpdate({ channelId }: { channelId: string }) {
-        this.channelMessage.subscribe(value => {
-            const parsedData = JSON.parse(value.data)
-            if (parsedData.eventName === `channel-streaming-room-member-update-${channelId}`) {
-                console.log("parsedData", parsedData)
-            }
-        })
-    }
+function listenToRoomMemberUpdate({ channelId }: { channelId: string }) {
+    channelMessage.subscribe(value => {
+        const parsedData = JSON.parse(value.data)
+        if (parsedData.eventName === `channel-streaming-room-member-update-${channelId}`) {
+            console.log("parsedData", parsedData)
+        }
+    })
+}
 
-    listenToUserActions({ channelId }: { channelId: string }) {
-        this.channelMessage.subscribe(value => {
-            const parsedData = JSON.parse(value.data)
-            if (parsedData.eventName === `channel-streaming-user-actions-${channelId}`) {
-                console.log("parsedData", parsedData)
-            }
-        })
-    }
+function listenToUserActions({ channelId }: { channelId: string }) {
+    channelMessage.subscribe(value => {
+        const parsedData = JSON.parse(value.data)
+        if (parsedData.eventName === `channel-streaming-user-actions-${channelId}`) {
+            console.log("parsedData", parsedData)
+        }
+    })
 }
 
-export const socketStore = new SocketStore()
\ No newline at end of file
+export {
+    getPlatformSocket,
+    getChannelSocket,
+    emitUserConnection,
+    emitRemovedUser,
+    emitChannelUpdate,
+    emitChannelAccessRequest,
+    emitChannelAccessResponse,
+    emitVideoRecordingStarted,
+    emitVideoRecordingEnded,
+    emitCompositionDeleted,
+    emitChatMessage,
+    emitChatTypingByUser,
+    emitChannelSubscribeByUser,
+    emitMessageToChannel,
+    emitDeleteMessageToChannel,
+    emitDeleteAllMessagesToChannel,
+    emitHistoryToChannel,
+    emitChannelChatTypingByUser,
+    emitRoomMemberUpdate,
+    emitUserActions,
+    emitReactToMessage
+}
\ No newline at end of file
diff --git a/src/lib/stores/streamStore.ts b/src/lib/stores/streamStore.ts
index 9e7b411a..9d764904 100644
--- a/src/lib/stores/streamStore.ts
+++ b/src/lib/stores/streamStore.ts
@@ -1,716 +1,740 @@
 import { writable, type Writable } from 'svelte/store'
 import { env } from '$env/dynamic/public'
 // import { currentChannel } from '$lib/stores/channelStore'
-import { socketStore } from '$lib/stores/socketStore'
-
-class StreamStore {
-    public videoStreamId = ''
-    public hasActiveTracks = false
-
-    public userData: {
-        id: string
-        avatar: any
-        customUsername: any
-        displayName: string
-        userType: string
-        obsState: string
-        screenState: string
-        webcamState: string
-        audioState: string
-        isHandRaised: boolean
-        obsStream: any
-        screenStream: any
-        webcamStream: any
-        audioStream: any
-    } = {
-            id: '',
-            avatar: null,
-            customUsername: null,
-            displayName: '',
-            userType: 'listener',
-            obsState: 'restricted',
-            screenState: 'restricted',
-            webcamState: 'restricted',
-            audioState: 'restricted',
-            isHandRaised: false,
-            obsStream: null,
-            screenStream: null,
-            webcamStream: null,
-            audioStream: null
-        }
+import { emitRoomMemberUpdate, emitUserActions } from '$lib/stores/socketStore'
+
+let videoStreamId = ''
+let hasActiveTracks = false
+
+const userData: {
+    id: string
+    avatar: any
+    customUsername: any
+    displayName: string
+    userType: string
+    obsState: string
+    screenState: string
+    webcamState: string
+    audioState: string
+    isHandRaised: boolean
+    obsStream: any
+    screenStream: any
+    webcamStream: any
+    audioStream: any
+} = {
+    id: '',
+    avatar: null,
+    customUsername: null,
+    displayName: '',
+    userType: 'listener',
+    obsState: 'restricted',
+    screenState: 'restricted',
+    webcamState: 'restricted',
+    audioState: 'restricted',
+    isHandRaised: false,
+    obsStream: null,
+    screenStream: null,
+    webcamStream: null,
+    audioStream: null
+}
 
-    public streamOptions: {
-        isRecording: boolean
-        isLiveStreaming: boolean
-        isEveryoneSilenced: boolean
-        duration: number
-        hasWaitedOneSecondObs: boolean
-        hasWaitedOneSecondScreen: boolean
-        hasWaitedOneSecondWebcam: boolean
-        hasWaitedOneSecondAudio: boolean
-        hasWaitedOneSecondRecord: boolean
-        hasWaitedOneSecondRaiseHand: boolean
-        hasWaitedOneSecondSilence: boolean
-        isTimedOut: boolean
-        isMaxLimitReached: boolean
-    } = {
-            isRecording: false,
-            isLiveStreaming: false,
-            isEveryoneSilenced: true,
-            duration: 0,
-            hasWaitedOneSecondObs: true,
-            hasWaitedOneSecondScreen: true,
-            hasWaitedOneSecondWebcam: true,
-            hasWaitedOneSecondAudio: true,
-            hasWaitedOneSecondRecord: true,
-            hasWaitedOneSecondRaiseHand: true,
-            hasWaitedOneSecondSilence: true,
-            isTimedOut: false,
-            isMaxLimitReached: false
-        }
+let streamOptions: {
+    isRecording: boolean
+    isLiveStreaming: boolean
+    isEveryoneSilenced: boolean
+    duration: number
+    hasWaitedOneSecondObs: boolean
+    hasWaitedOneSecondScreen: boolean
+    hasWaitedOneSecondWebcam: boolean
+    hasWaitedOneSecondAudio: boolean
+    hasWaitedOneSecondRecord: boolean
+    hasWaitedOneSecondRaiseHand: boolean
+    hasWaitedOneSecondSilence: boolean
+    isTimedOut: boolean
+    isMaxLimitReached: boolean
+} = {
+    isRecording: false,
+    isLiveStreaming: false,
+    isEveryoneSilenced: true,
+    duration: 0,
+    hasWaitedOneSecondObs: true,
+    hasWaitedOneSecondScreen: true,
+    hasWaitedOneSecondWebcam: true,
+    hasWaitedOneSecondAudio: true,
+    hasWaitedOneSecondRecord: true,
+    hasWaitedOneSecondRaiseHand: true,
+    hasWaitedOneSecondSilence: true,
+    isTimedOut: false,
+    isMaxLimitReached: false
+}
 
-    constructor(
-        public roomMembers: Writable<[]> = writable([]),
-        public channelMembersCount: Writable<number> = writable(0),
-    ) {}
+export const roomMembers: Writable<[]> = writable([])
+export const channelMembersCount: Writable<number> = writable(0)
 
-    async getMembers({ channelId, isParticipant, skip, limit }: { channelId: string, isParticipant: boolean, skip: number, limit: number }) {
-        return await fetch(`${env.PUBLIC_API_URL}/channel-members?channelId=${channelId}&isParticipant=${isParticipant}&skip=${skip}&limit=${limit}`, {
-            method: 'GET',
-        }).then(response => response.json())
-    }
+async function getMembers({ channelId, isParticipant, skip, limit }: { channelId: string, isParticipant: boolean, skip: number, limit: number }) {
+    return await fetch(`${env.PUBLIC_API_URL}/channel-members?channelId=${channelId}&isParticipant=${isParticipant}&skip=${skip}&limit=${limit}`, {
+        method: 'GET',
+    }).then(response => response.json())
+}
 
-    async getChannelMembersCount({ channelId }: { channelId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/channel-members/count?channelId=${channelId}`, {
-            method: 'GET'
-        }).then(response => response.json())
-    }
+async function getChannelMembersCount({ channelId }: { channelId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/channel-members/count?channelId=${channelId}`, {
+        method: 'GET'
+    }).then(response => response.json())
+}
 
-    async initRoomMembers() {
-        //TODO: get currenChannel writeable
-        // this.roomMembers = await this.getMembers({
-        //     channelId: channelStore.currentChannel._id,
-        //     isParticipant: true,
-        //     skip: 0,
-        //     limit: 10
-        // })
-        // this.channelMembersCount = await this.getChannelMembersCount({
-        //     channelId: channelStore.currentChannel._id
-        // })
-        // Object.assign(this.userData, this.getMember(this.authService.currentUser))
-        // const doesUserExist = this.roomMembers.some((member) => member.id == this.userData.id)
-        // if (channelStore.currentChannel.user === this.userData.id && !doesUserExist) {
-        //     this.roomMembers.push(this.userData)
-        // }
-        // socketStore.emitRoomMemberUpdate({
-        //     channelId: channelStore.currentChannel._id,
-        //     userData: this.userData,
-        //     isNewUser: true
-        // })
-        // this.listenToRoomMemberUpdate()
-        // this.listenToUserActions()
-
-        // this.streamOptions.isEveryoneSilenced =
-        //     channelStore.currentChannel.isEveryoneSilenced
-        // if (channelStore.currentChannel.user === this.authService.currentUser._id) {
-        //     await this.createLiveStream(
-        //         channelStore.currentChannel._id,
-        //         `${channelStore.currentChannel.title}-${channelStore.currentChannel.user}`
-        //     )
-        //     await channelStore.updateIsStreaming({
-        //         channelId: channelStore.currentChannel._id,
-        //         isStreaming: true
-        //     })
-        // }
-    }
+async function initRoomMembers() {
+    //TODO: get currenChannel writeable
+    // roomMembers = await getMembers({
+    //     channelId: channelStore.currentChannel._id,
+    //     isParticipant: true,
+    //     skip: 0,
+    //     limit: 10
+    // })
+    // channelMembersCount = await getChannelMembersCount({
+    //     channelId: channelStore.currentChannel._id
+    // })
+    // Object.assign(userData, getMember(authService.currentUser))
+    // const doesUserExist = roomMembers.some((member) => member.id == userData.id)
+    // if (channelStore.currentChannel.user === userData.id && !doesUserExist) {
+    //     roomMembers.push(userData)
+    // }
+    // socketStore.emitRoomMemberUpdate({
+    //     channelId: channelStore.currentChannel._id,
+    //     userData: userData,
+    //     isNewUser: true
+    // })
+    // listenToRoomMemberUpdate()
+    // listenToUserActions()
+
+    // streamOptions.isEveryoneSilenced =
+    //     channelStore.currentChannel.isEveryoneSilenced
+    // if (channelStore.currentChannel.user === authService.currentUser._id) {
+    //     await createLiveStream(
+    //         channelStore.currentChannel._id,
+    //         `${channelStore.currentChannel.title}-${channelStore.currentChannel.user}`
+    //     )
+    //     await channelStore.updateIsStreaming({
+    //         channelId: channelStore.currentChannel._id,
+    //         isStreaming: true
+    //     })
+    // }
+}
 
-    listenToRoomMemberUpdate() {
-        //TODO: fix subscribing to writeables
-        // this.roomMembersSubscription = socketStore
-        //     .listenToRoomMemberUpdate({
-        //         channelId: channelStore.currentChannel._id
-        //     })
-        //     .subscribe(async (data) => {
-        //         if (channelStore.currentChannel) {
-        //             if (data.isNewUser) {
-        //                 const doesUserExist = this.roomMembers.some(
-        //                     (member) => member.id == data.userData.id
-        //                 )
-        //                 if (!doesUserExist && data.userData.userType != 'listener') {
-        //                     this.roomMembers.push(data.userData)
-        //                     if (this.userData.id == data.userData.id) {
-        //                         this.userData = data.userData
-        //                     }
-        //                 }
-        //             } else if (!data.isNewUser) {
-        //                 const index = this.roomMembers.findIndex(
-        //                     (item) => item.id == data.userData.id
-        //                 )
-        //                 if (index > -1) this.roomMembers.splice(index, 1)
-        //                 if (this.userData.id == data.userData.id) {
-        //                     this.userData = data.userData
-        //                 }
-        //             }
-        //             if (data.userData.obsStream) this.attachTrack(data.userData.obsStream, data.userData.id, 'obs')
-        //             if (data.userData.screenStream) this.attachTrack(data.userData.screenStream, data.userData.id, 'screen')
-        //             if (data.userData.webcamStream) this.attachTrack(data.userData.webcamStream, data.userData.id, 'webcam')
-        //             if (data.userData.audioStream) this.attachTrack(data.userData.audioStream, data.userData.id, 'audio')
-        //             this.channelMembersCount = await this.getChannelMembersCount({
-        //                 channelId: channelStore.currentChannel._id
-        //             })
-        //             console.log("this.channelMembersCount", this.channelMembersCount)
-        //             channelStore.currentChannel.memberCount = this.channelMembersCount
-        //         }
-        //     })
-    }
+function listenToRoomMemberUpdate() {
+    //TODO: fix subscribing to writeables
+    // roomMembersSubscription = socketStore
+    //     .listenToRoomMemberUpdate({
+    //         channelId: channelStore.currentChannel._id
+    //     })
+    //     .subscribe(async (data) => {
+    //         if (channelStore.currentChannel) {
+    //             if (data.isNewUser) {
+    //                 const doesUserExist = roomMembers.some(
+    //                     (member) => member.id == data.userData.id
+    //                 )
+    //                 if (!doesUserExist && data.userData.userType != 'listener') {
+    //                     roomMembers.push(data.userData)
+    //                     if (userData.id == data.userData.id) {
+    //                         userData = data.userData
+    //                     }
+    //                 }
+    //             } else if (!data.isNewUser) {
+    //                 const index = roomMembers.findIndex(
+    //                     (item) => item.id == data.userData.id
+    //                 )
+    //                 if (index > -1) roomMembers.splice(index, 1)
+    //                 if (userData.id == data.userData.id) {
+    //                     userData = data.userData
+    //                 }
+    //             }
+    //             if (data.userData.obsStream) attachTrack(data.userData.obsStream, data.userData.id, 'obs')
+    //             if (data.userData.screenStream) attachTrack(data.userData.screenStream, data.userData.id, 'screen')
+    //             if (data.userData.webcamStream) attachTrack(data.userData.webcamStream, data.userData.id, 'webcam')
+    //             if (data.userData.audioStream) attachTrack(data.userData.audioStream, data.userData.id, 'audio')
+    //             channelMembersCount = await getChannelMembersCount({
+    //                 channelId: channelStore.currentChannel._id
+    //             })
+    //             console.log("channelMembersCount", channelMembersCount)
+    //             channelStore.currentChannel.memberCount = channelMembersCount
+    //         }
+    //     })
+}
 
-    listenToUserActions() {
-        //TODO: fix subscribing to writeables
-        // this.userActionsSubscription = socketStore
-        //     .listenToUserActions({
-        //         channelId: channelStore.currentChannel._id
-        //     })
-        //     .subscribe(async (data) => {
-        //         const messageData = JSON.parse(data.message)
-        //         let member = this.roomMembers.find((member) => member.id == messageData.userId)
-        //         if (!member) member = data.userData
-        //         switch (messageData.type) {
-        //             case 'toggleTrack':
-        //                 if (messageData.trackType === 'obs') { member.obsState === 'live' ? this.attachTrack(member.obsStream, data.userData.id, 'obs') : this.detachTrack(member.id, 'obs') }
-        //                 if (messageData.trackType === 'screen' && this.userData.id !== member.id) {
-        //                     member.screenState === 'live' ? this.attachTrack(member.screenStream, member.id, 'screen') : this.detachTrack(member.id, 'screen')
-        //                 }
-        //                 if (messageData.trackType === 'webcam' && this.userData.id !== member.id) { member.webcamState === 'live' ? this.attachTrack(member.webcamStream, member.id, 'webcam') : this.detachTrack(member.id, 'webcam') }
-        //                 if (messageData.trackType === 'audio' && this.userData.id !== member.id) { member.audioState === 'live' ? this.attachTrack(member.audioStream, member.id, 'audio') : this.detachTrack(member.id, 'audio') }
-        //                 break;
-        //             case 'toggleRaiseHand':
-        //                 if (channelStore.currentChannel.user == this.userData.id &&
-        //                     this.userData.id != messageData.userId &&
-        //                     messageData.isHandRaised
-        //                 ) {
-        //                     const snackBarRef = this.snackBar.open(
-        //                         `${member.displayName} would like to participate`,
-        //                         'Allow',
-        //                         { duration: 5000, verticalPosition: 'top' }
-        //                     )
-        //                     snackBarRef.onAction().subscribe(() => {
-        //                         try {
-        //                             this.toggleUserType(member, true)
-        //                         } catch (err) {
-        //                             console.log(err)
-        //                         }
-        //                     })
-        //                     // this.inAppSnackBarService.openSnackBar(`${member} would like to participate`, 'error', 3000, 'bottom', 'center')
-        //                 }
-        //                 break
-        //             case 'toggleSilenceOnEveryone':
-        //                 this.streamOptions.isEveryoneSilenced = messageData.isEveryoneSilenced
-        //                 if (this.userData.id !== channelStore.currentChannel.user) {
-        //                     await this.stopObsStream()
-        //                     await this.stopScreenStream()
-        //                     await this.stopWebcamStream()
-        //                     await this.stopAudioStream()
-        //                 }
-        //                 break
-        //             case 'toggleRestriction':
-        //                 switch (messageData.featureType) {
-        //                     case 'obs':
-        //                         if (member.id === messageData.userId) {
-        //                             member.obsState = messageData.featureState
-        //                         }
-        //                         if (this.userData.id === messageData.userId) {
-        //                             this.userData.obsState = messageData.featureState
-        //                             await this.stopObsStream(this.userData.obsState)
-        //                         }
-        //                         break
-        //                     case 'screen':
-        //                         if (member.id === messageData.userId) {
-        //                             member.screenState = messageData.featureState
-        //                         }
-        //                         if (this.userData.id === messageData.userId) {
-        //                             this.userData.screenState = messageData.featureState
-        //                             await this.stopScreenStream(this.userData.screenState)
-        //                         }
-        //                         break
-        //                     case 'webcam':
-        //                         if (member.id === messageData.userId) {
-        //                             member.webcamState = messageData.featureState
-        //                         }
-        //                         if (this.userData.id === messageData.userId) {
-        //                             this.userData.webcamState = messageData.featureState
-        //                             await this.stopWebcamStream(this.userData.webcamState)
-        //                         }
-        //                         break
-        //                     case 'audio':
-        //                         if (member.id === messageData.userId) {
-        //                             member.audioState = messageData.featureState
-        //                         }
-        //                         if (this.userData.id === messageData.userId) {
-        //                             this.userData.audioState = messageData.featureState
-        //                             await this.stopAudioStream(this.userData.audioState)
-        //                         }
-        //                         break
-        //                 }
-        //                 break
-        //         }
-        //         this.updateUserInRoom(member)
-        //     })
-    }
+function listenToUserActions() {
+    //TODO: fix subscribing to writeables
+    // userActionsSubscription = socketStore
+    //     .listenToUserActions({
+    //         channelId: channelStore.currentChannel._id
+    //     })
+    //     .subscribe(async (data) => {
+    //         const messageData = JSON.parse(data.message)
+    //         let member = roomMembers.find((member) => member.id == messageData.userId)
+    //         if (!member) member = data.userData
+    //         switch (messageData.type) {
+    //             case 'toggleTrack':
+    //                 if (messageData.trackType === 'obs') { member.obsState === 'live' ? attachTrack(member.obsStream, data.userData.id, 'obs') : detachTrack(member.id, 'obs') }
+    //                 if (messageData.trackType === 'screen' && userData.id !== member.id) {
+    //                     member.screenState === 'live' ? attachTrack(member.screenStream, member.id, 'screen') : detachTrack(member.id, 'screen')
+    //                 }
+    //                 if (messageData.trackType === 'webcam' && userData.id !== member.id) { member.webcamState === 'live' ? attachTrack(member.webcamStream, member.id, 'webcam') : detachTrack(member.id, 'webcam') }
+    //                 if (messageData.trackType === 'audio' && userData.id !== member.id) { member.audioState === 'live' ? attachTrack(member.audioStream, member.id, 'audio') : detachTrack(member.id, 'audio') }
+    //                 break;
+    //             case 'toggleRaiseHand':
+    //                 if (channelStore.currentChannel.user == userData.id &&
+    //                     userData.id != messageData.userId &&
+    //                     messageData.isHandRaised
+    //                 ) {
+    //                     const snackBarRef = snackBar.open(
+    //                         `${member.displayName} would like to participate`,
+    //                         'Allow',
+    //                         { duration: 5000, verticalPosition: 'top' }
+    //                     )
+    //                     snackBarRef.onAction().subscribe(() => {
+    //                         try {
+    //                             toggleUserType(member, true)
+    //                         } catch (err) {
+    //                             console.log(err)
+    //                         }
+    //                     })
+    //                     // inAppSnackBarService.openSnackBar(`${member} would like to participate`, 'error', 3000, 'bottom', 'center')
+    //                 }
+    //                 break
+    //             case 'toggleSilenceOnEveryone':
+    //                 streamOptions.isEveryoneSilenced = messageData.isEveryoneSilenced
+    //                 if (userData.id !== channelStore.currentChannel.user) {
+    //                     await stopObsStream()
+    //                     await stopScreenStream()
+    //                     await stopWebcamStream()
+    //                     await stopAudioStream()
+    //                 }
+    //                 break
+    //             case 'toggleRestriction':
+    //                 switch (messageData.featureType) {
+    //                     case 'obs':
+    //                         if (member.id === messageData.userId) {
+    //                             member.obsState = messageData.featureState
+    //                         }
+    //                         if (userData.id === messageData.userId) {
+    //                             userData.obsState = messageData.featureState
+    //                             await stopObsStream(userData.obsState)
+    //                         }
+    //                         break
+    //                     case 'screen':
+    //                         if (member.id === messageData.userId) {
+    //                             member.screenState = messageData.featureState
+    //                         }
+    //                         if (userData.id === messageData.userId) {
+    //                             userData.screenState = messageData.featureState
+    //                             await stopScreenStream(userData.screenState)
+    //                         }
+    //                         break
+    //                     case 'webcam':
+    //                         if (member.id === messageData.userId) {
+    //                             member.webcamState = messageData.featureState
+    //                         }
+    //                         if (userData.id === messageData.userId) {
+    //                             userData.webcamState = messageData.featureState
+    //                             await stopWebcamStream(userData.webcamState)
+    //                         }
+    //                         break
+    //                     case 'audio':
+    //                         if (member.id === messageData.userId) {
+    //                             member.audioState = messageData.featureState
+    //                         }
+    //                         if (userData.id === messageData.userId) {
+    //                             userData.audioState = messageData.featureState
+    //                             await stopAudioStream(userData.audioState)
+    //                         }
+    //                         break
+    //                 }
+    //                 break
+    //         }
+    //         updateUserInRoom(member)
+    //     })
+}
 
-    disconnected() {
-        console.log('disconnected')
-        //TODO: determine if this is needed
-        // if (!this.sharedService.wasHomePressed) {
-        //     window.location.href = '/'
-        // }
-        this.streamOptions = {
-            isRecording: false,
-            isLiveStreaming: false,
-            isEveryoneSilenced: false,
-            duration: 0,
-            hasWaitedOneSecondObs: true,
-            hasWaitedOneSecondScreen: true,
-            hasWaitedOneSecondWebcam: true,
-            hasWaitedOneSecondAudio: true,
-            hasWaitedOneSecondRecord: true,
-            hasWaitedOneSecondRaiseHand: true,
-            hasWaitedOneSecondSilence: true,
-            isTimedOut: false,
-            isMaxLimitReached: false
-        }
-        this.videoStreamId = ''
-        this.roomMembers.set([])
-        this.hasActiveTracks = false
-        //TODO: determine if this is needed
-        // this.sharedService.wasHomePressed = false
-
-        //TODO: fix sockets
-        // socketStore.emitRoomMemberUpdate({
-        //     channelId: channelStore.currentChannel._id,
-        //     userData: this.userData,
-        //     isNewUser: false
-        // })
-        // if (this.authService.currentUser && channelStore.currentChannel.user == this.authService.currentUser._id) {
-        //     this.updateLiveStream()
-        //     channelStore.updateIsStreaming({
-        //         channelId: channelStore.currentChannel._id,
-        //         isStreaming: false
-        //     })
-        // }
-    }
+function disconnected() {
+    console.log('disconnected')
+    //TODO: determine if this is needed
+    // if (!sharedService.wasHomePressed) {
+    //     window.location.href = '/'
+    // }
+    streamOptions = {
+        isRecording: false,
+        isLiveStreaming: false,
+        isEveryoneSilenced: false,
+        duration: 0,
+        hasWaitedOneSecondObs: true,
+        hasWaitedOneSecondScreen: true,
+        hasWaitedOneSecondWebcam: true,
+        hasWaitedOneSecondAudio: true,
+        hasWaitedOneSecondRecord: true,
+        hasWaitedOneSecondRaiseHand: true,
+        hasWaitedOneSecondSilence: true,
+        isTimedOut: false,
+        isMaxLimitReached: false
+    }
+    videoStreamId = ''
+    roomMembers.set([])
+    hasActiveTracks = false
+    //TODO: determine if this is needed
+    // sharedService.wasHomePressed = false
+
+    //TODO: fix sockets
+    // socketStore.emitRoomMemberUpdate({
+    //     channelId: channelStore.currentChannel._id,
+    //     userData: userData,
+    //     isNewUser: false
+    // })
+    // if (authService.currentUser && channelStore.currentChannel.user == authService.currentUser._id) {
+    //     updateLiveStream()
+    //     channelStore.updateIsStreaming({
+    //         channelId: channelStore.currentChannel._id,
+    //         isStreaming: false
+    //     })
+    // }
+}
 
-    getMember({ _id, avatar, customUsername, displayName, obsStream, screenStream, webcamStream, audioStream }
-        : { _id: string, avatar: string, customUsername: string, displayName: string, obsStream: string, screenStream: string, webcamStream: string, audioStream: string }) {
-        return {
-            id: _id,
-            avatar: avatar,
-            customUsername: customUsername,
-            displayName: displayName,
-            userType: '',//TODO: fix subscribing to writeables _id == channelStore.currentChannel.user ? 'host' : 'listener',
-            obsState: 'hibernate',
-            screenState: 'hibernate',
-            webcamState: 'hibernate',
-            audioState: 'hibernate',
-            isHandRaised: false,
-            obsStream,
-            screenStream,
-            webcamStream,
-            audioStream
-        }
+function getMember({ _id, avatar, customUsername, displayName, obsStream, screenStream, webcamStream, audioStream }
+    : { _id: string, avatar: string, customUsername: string, displayName: string, obsStream: string, screenStream: string, webcamStream: string, audioStream: string }) {
+    return {
+        id: _id,
+        avatar: avatar,
+        customUsername: customUsername,
+        displayName: displayName,
+        userType: '',//TODO: fix subscribing to writeables _id == channelStore.currentChannel.user ? 'host' : 'listener',
+        obsState: 'hibernate',
+        screenState: 'hibernate',
+        webcamState: 'hibernate',
+        audioState: 'hibernate',
+        isHandRaised: false,
+        obsStream,
+        screenStream,
+        webcamStream,
+        audioStream
     }
+}
 
-    updateUserInRoom(userData: any) {
-        //TODO: fix subscribing to writeables
-        // const roomUser = this.roomMembers.find((member) => member.id == userData.id)
-        // if (roomUser) {
-        //     Object.assign(roomUser, userData)
-        // } else {
-        //     if (userData.userType != 'listener') this.roomMembers.push(userData)
-        // }
-    }
+function updateUserInRoom(userData: any) {
+    //TODO: fix subscribing to writeables
+    // const roomUser = roomMembers.find((member) => member.id == userData.id)
+    // if (roomUser) {
+    //     Object.assign(roomUser, userData)
+    // } else {
+    //     if (userData.userType != 'listener') roomMembers.push(userData)
+    // }
+}
 
-    async startObsStream() {
-        if (this.streamOptions.hasWaitedOneSecondObs) {
-            this.waitOneSecondObs()
-            const trackName = `obs-${this.userData.id}`
-            const liveInput = await this.getLiveInput({ meta: { name: trackName }, recording: { mode: "automatic" } })
-            this.userData.obsStream = liveInput
-            this.userData.obsState = 'live'
-            this.updateUserInRoom(this.userData)
-            this.sendDataToRoom({ type: 'toggleTrack', trackType: 'obs' })
-            this.streamOptions.isLiveStreaming = true
-            // this.sfxService.playAudio(SoundEffect.StartedSharingScreen)
-            this.waitOneSecondObs()
-            this.checkForActiveTracks()
-            //TODO: show alert
-            // this.dialogService.openDialog({
-            //     title: 'Streaming Information',
-            //     message: `URL: + ${liveInput.webRTC.url}`,
-            //     okText: 'OK'
-            // }, {
-            //     disableClose: true
-            // })
-        }
+async function startObsStream() {
+    if (streamOptions.hasWaitedOneSecondObs) {
+        waitOneSecondObs()
+        const trackName = `obs-${userData.id}`
+        const liveInput = await getLiveInput({ meta: { name: trackName }, recording: { mode: "automatic" } })
+        userData.obsStream = liveInput
+        userData.obsState = 'live'
+        updateUserInRoom(userData)
+        sendDataToRoom({ type: 'toggleTrack', trackType: 'obs' })
+        streamOptions.isLiveStreaming = true
+        // sfxService.playAudio(SoundEffect.StartedSharingScreen)
+        waitOneSecondObs()
+        checkForActiveTracks()
+        //TODO: show alert
+        // dialogService.openDialog({
+        //     title: 'Streaming Information',
+        //     message: `URL: + ${liveInput.webRTC.url}`,
+        //     okText: 'OK'
+        // }, {
+        //     disableClose: true
+        // })
     }
+}
 
-    async stopObsStream(state = 'hibernate') {
-        await this.deleteLiveInput({ inputId: this.userData.obsStream?.uid })
-        this.streamOptions.isLiveStreaming = false
-        this.userData.obsStream = null
-        this.userData.obsState = state
-        this.updateUserInRoom(this.userData)
-        this.sendDataToRoom({ type: 'toggleTrack', trackType: 'obs' })
-        this.detachTrack({ memberId: this.userData.id, trackType: 'obs' })
-        this.checkForActiveTracks()
-    }
+async function stopObsStream(state = 'hibernate') {
+    await deleteLiveInput({ inputId: userData.obsStream?.uid })
+    streamOptions.isLiveStreaming = false
+    userData.obsStream = null
+    userData.obsState = state
+    updateUserInRoom(userData)
+    sendDataToRoom({ type: 'toggleTrack', trackType: 'obs' })
+    detachTrack({ memberId: userData.id, trackType: 'obs' })
+    checkForActiveTracks()
+}
 
-    async startScreenStream() {
-        if (this.streamOptions.hasWaitedOneSecondScreen) {
-            this.waitOneSecondScreen()
-            const trackName = `screen-${this.userData.id}`
-            const liveInput = await this.getLiveInput({ meta: { name: trackName }, recording: { mode: "automatic" } })
-            this.userData.screenStream = liveInput
-            const videoElement = this.createVideoElement({ memberId: this.userData.id, trackType: 'screen' })
-            //TODO: add WHIPClient
-            // const input = new WHIPClient(liveInput.webRTC.url, videoElement, 'screen')
-            this.userData.screenState = 'live'
-            this.updateUserInRoom(this.userData)
-            this.sendDataToRoom({ type: 'toggleTrack', trackType: 'screen' })
-            // this.userData.screenStream.on('stopped', () => {
-            //     this.stopScreenStream()
-            // })
-            this.streamOptions.isLiveStreaming = true
-            // this.sfxService.playAudio(SoundEffect.StartedSharingScreen)
-            this.waitOneSecondScreen()
-            this.checkForActiveTracks()
-        }
+async function startScreenStream() {
+    if (streamOptions.hasWaitedOneSecondScreen) {
+        waitOneSecondScreen()
+        const trackName = `screen-${userData.id}`
+        const liveInput = await getLiveInput({ meta: { name: trackName }, recording: { mode: "automatic" } })
+        userData.screenStream = liveInput
+        const videoElement = createVideoElement({ memberId: userData.id, trackType: 'screen' })
+        //TODO: add WHIPClient
+        // const input = new WHIPClient(liveInput.webRTC.url, videoElement, 'screen')
+        userData.screenState = 'live'
+        updateUserInRoom(userData)
+        sendDataToRoom({ type: 'toggleTrack', trackType: 'screen' })
+        // userData.screenStream.on('stopped', () => {
+        //     stopScreenStream()
+        // })
+        streamOptions.isLiveStreaming = true
+        // sfxService.playAudio(SoundEffect.StartedSharingScreen)
+        waitOneSecondScreen()
+        checkForActiveTracks()
     }
+}
 
-    createVideoElement({ memberId, trackType }: { memberId: string, trackType: string }): HTMLVideoElement {
-        const container = trackType !== 'audio' ? document.getElementById('screen_container') : document.getElementById('audio_container')
-        //TODO: get htmlviewelement in sveltekit
-        const videoElement: HTMLVideoElement = new HTMLVideoElement()//this.renderer.createElement('video')
-        videoElement.setAttribute('id', `${trackType}-${memberId}`)
-        videoElement.setAttribute('autoplay', 'autoplay')
-
-        const { matches: isMobile } = window.matchMedia('(max-width: 767px)')
-        if (videoElement) {
-            if (isMobile) {
-                videoElement.style.width = '80%'
-                videoElement.style.cssText =
-                    'scroll-snap-align: center; width: 80%!important; margin: 0 0.5rem;'
-            } else {
-                videoElement.style.width = '100%'
-            }
-            videoElement.addEventListener('dblclick', (event) => {
-                if (document.fullscreenElement) {
-                    document.exitFullscreen()
-                } else {
-                    videoElement.requestFullscreen()
-                }
-            })
-            videoElement.addEventListener('click', (event) => {
-                event.preventDefault()
-                event.stopPropagation()
-                videoElement.scrollIntoView()
-            })
-        }
-
-        container?.append(videoElement)
+function createVideoElement({ memberId, trackType }: { memberId: string, trackType: string }): HTMLVideoElement {
+    const container = trackType !== 'audio' ? document.getElementById('screen_container') : document.getElementById('audio_container')
+    //TODO: get htmlviewelement in sveltekit
+    const videoElement: HTMLVideoElement = new HTMLVideoElement()//renderer.createElement('video')
+    videoElement.setAttribute('id', `${trackType}-${memberId}`)
+    videoElement.setAttribute('autoplay', 'autoplay')
 
+    const { matches: isMobile } = window.matchMedia('(max-width: 767px)')
+    if (videoElement) {
         if (isMobile) {
-            const allVideoElements = Array.prototype.slice.call(
-                container?.getElementsByTagName('video')
-            )
-            allVideoElements.forEach((element, i) => {
-                if (i === 0) element.style.marginLeft = '10%'
-                else element.style.marginLeft = '0.5rem'
-                if (allVideoElements.length === i + 1) element.style.marginRight = '10%'
-                else element.style.marginRight = '0.5rem'
-            })
+            videoElement.style.width = '80%'
+            videoElement.style.cssText =
+                'scroll-snap-align: center; width: 80%!important; margin: 0 0.5rem;'
+        } else {
+            videoElement.style.width = '100%'
         }
-
-        return videoElement
+        videoElement.addEventListener('dblclick', (event) => {
+            if (document.fullscreenElement) {
+                document.exitFullscreen()
+            } else {
+                videoElement.requestFullscreen()
+            }
+        })
+        videoElement.addEventListener('click', (event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            videoElement.scrollIntoView()
+        })
     }
 
-    attachTrack({ liveInput, memberId, trackType }: { liveInput: any, memberId: string, trackType: string }) {
-        const videoElement = this.createVideoElement({ memberId, trackType })
-        //TODO: add WHEPClient
-        // const output = new WHEPClient(liveInput.webRTCPlayback.url, videoElement)
-    }
+    container?.append(videoElement)
 
-    detachTrack({ memberId, trackType }: { memberId: string, trackType: string }) {
-        const videoElement = document.getElementById(`${trackType}-${memberId}`)
-        videoElement?.remove()
+    if (isMobile) {
+        const allVideoElements = Array.prototype.slice.call(
+            container?.getElementsByTagName('video')
+        )
+        allVideoElements.forEach((element, i) => {
+            if (i === 0) element.style.marginLeft = '10%'
+            else element.style.marginLeft = '0.5rem'
+            if (allVideoElements.length === i + 1) element.style.marginRight = '10%'
+            else element.style.marginRight = '0.5rem'
+        })
     }
 
-    async stopScreenStream(state = 'hibernate') {
-        await this.deleteLiveInput({ inputId: this.userData.screenStream?.uid })
-        this.streamOptions.isLiveStreaming = false
-        this.userData.screenStream = null
-        this.userData.screenState = state
-        this.updateUserInRoom(this.userData)
-        this.sendDataToRoom({ type: 'toggleTrack', trackType: 'screen' })
-        this.detachTrack({ memberId: this.userData.id, trackType: 'screen' })
-        this.checkForActiveTracks()
-    }
+    return videoElement
+}
 
-    async startWebcamStream() {
-        if (this.streamOptions.hasWaitedOneSecondWebcam) {
-            this.waitOneSecondWebcam()
-            const trackName = `webcam-${this.userData.id}`
-            const liveInput = await this.getLiveInput({ meta: { name: trackName }, recording: { mode: "automatic" } })
-            this.userData.webcamStream = liveInput
-            const videoElement = this.createVideoElement({ memberId: this.userData.id, trackType: 'webcam' })
-            //TODO: add WHIPClient
-            // const input = new WHIPClient(liveInput.webRTC.url, videoElement, 'webcam')
-            this.userData.screenState = 'live'
-            this.updateUserInRoom(this.userData)
-            this.sendDataToRoom({ type: 'toggleTrack', trackType: 'webcam' })
-            // this.userData.webcamStream.on('stopped', () => {
-            //     this.stopWebcamStream()
-            // })
-            this.waitOneSecondWebcam()
-            this.checkForActiveTracks()
-        }
-    }
+function attachTrack({ liveInput, memberId, trackType }: { liveInput: any, memberId: string, trackType: string }) {
+    const videoElement = createVideoElement({ memberId, trackType })
+    //TODO: add WHEPClient
+    // const output = new WHEPClient(liveInput.webRTCPlayback.url, videoElement)
+}
 
-    async stopWebcamStream(state = 'hibernate') {
-        await this.deleteLiveInput({ inputId: this.userData.webcamStream?.uid })
-        this.userData.webcamStream = null
-        this.userData.webcamState = state
-        this.updateUserInRoom(this.userData)
-        this.sendDataToRoom({ type: 'toggleTrack', trackType: 'webcam' })
-        this.detachTrack({ memberId: this.userData.id, trackType: 'webcam' })
-        this.checkForActiveTracks()
-    }
+function detachTrack({ memberId, trackType }: { memberId: string, trackType: string }) {
+    const videoElement = document.getElementById(`${trackType}-${memberId}`)
+    videoElement?.remove()
+}
 
-    async startAudioStream() {
-        if (this.streamOptions.hasWaitedOneSecondAudio) {
-            this.waitOneSecondAudio()
-            const trackName = `audio-${this.userData.id}`
-            const liveInput = await this.getLiveInput({ meta: { name: trackName }, recording: { mode: "automatic" } })
-            this.userData.audioStream = liveInput
-            const videoElement = this.createVideoElement({ memberId: this.userData.id, trackType: 'audio' })
-            //TODO: add WHIPClient
-            // const input = new WHIPClient(liveInput.webRTC.url, videoElement, 'audio')
-            this.userData.audioState = 'live'
-            this.updateUserInRoom(this.userData)
-            this.sendDataToRoom({ type: 'toggleTrack', trackType: 'audio' })
-            // this.userData.audioStream.onended = () => {
-            //     this.stopAudioStream()
-            // }
-            this.waitOneSecondAudio()
-            this.checkForActiveTracks()
-        }
-    }
+async function stopScreenStream(state = 'hibernate') {
+    await deleteLiveInput({ inputId: userData.screenStream?.uid })
+    streamOptions.isLiveStreaming = false
+    userData.screenStream = null
+    userData.screenState = state
+    updateUserInRoom(userData)
+    sendDataToRoom({ type: 'toggleTrack', trackType: 'screen' })
+    detachTrack({ memberId: userData.id, trackType: 'screen' })
+    checkForActiveTracks()
+}
 
-    async stopAudioStream(state = 'hibernate') {
-        await this.deleteLiveInput({ inputId: this.userData.audioStream?.uid })
-        this.userData.audioStream = null
-        this.userData.audioState = state
-        this.updateUserInRoom(this.userData)
-        this.sendDataToRoom({ type: 'toggleTrack', trackType: 'audio' })
-        this.detachTrack({ memberId: this.userData.id, trackType: 'audio' })
-        this.checkForActiveTracks()
+async function startWebcamStream() {
+    if (streamOptions.hasWaitedOneSecondWebcam) {
+        waitOneSecondWebcam()
+        const trackName = `webcam-${userData.id}`
+        const liveInput = await getLiveInput({ meta: { name: trackName }, recording: { mode: "automatic" } })
+        userData.webcamStream = liveInput
+        const videoElement = createVideoElement({ memberId: userData.id, trackType: 'webcam' })
+        //TODO: add WHIPClient
+        // const input = new WHIPClient(liveInput.webRTC.url, videoElement, 'webcam')
+        userData.screenState = 'live'
+        updateUserInRoom(userData)
+        sendDataToRoom({ type: 'toggleTrack', trackType: 'webcam' })
+        // userData.webcamStream.on('stopped', () => {
+        //     stopWebcamStream()
+        // })
+        waitOneSecondWebcam()
+        checkForActiveTracks()
     }
+}
 
-    //TODO: uncomment when adding video recording or when time limit for live streams
-    checkForActiveTracks() {
-        // this.hasActiveTracks = this.roomMembers.some(member => member.screenStream != null || member.webcamStream != null || member.audioStream != null)
-        // if (!this.hasActiveTracks) this.endRecording()
-    }
+async function stopWebcamStream(state = 'hibernate') {
+    await deleteLiveInput({ inputId: userData.webcamStream?.uid })
+    userData.webcamStream = null
+    userData.webcamState = state
+    updateUserInRoom(userData)
+    sendDataToRoom({ type: 'toggleTrack', trackType: 'webcam' })
+    detachTrack({ memberId: userData.id, trackType: 'webcam' })
+    checkForActiveTracks()
+}
 
-    async leaveRoom() {
-        // if (channelStore.currentChannel) {
-        this.disconnected()
-        this.stopObsStream()
-        this.stopScreenStream()
-        this.stopWebcamStream()
-        this.stopAudioStream()
-        //TODO: fix subscribring to room members writeable
-        // if (this.roomMembersSubscription) {
-        //     this.roomMembersSubscription.unsubscribe()
-        // }
-        // if (this.userActionsSubscription) {
-        //     this.userActionsSubscription.unsubscribe()
-        // }
+async function startAudioStream() {
+    if (streamOptions.hasWaitedOneSecondAudio) {
+        waitOneSecondAudio()
+        const trackName = `audio-${userData.id}`
+        const liveInput = await getLiveInput({ meta: { name: trackName }, recording: { mode: "automatic" } })
+        userData.audioStream = liveInput
+        const videoElement = createVideoElement({ memberId: userData.id, trackType: 'audio' })
+        //TODO: add WHIPClient
+        // const input = new WHIPClient(liveInput.webRTC.url, videoElement, 'audio')
+        userData.audioState = 'live'
+        updateUserInRoom(userData)
+        sendDataToRoom({ type: 'toggleTrack', trackType: 'audio' })
+        // userData.audioStream.onended = () => {
+        //     stopAudioStream()
         // }
+        waitOneSecondAudio()
+        checkForActiveTracks()
     }
+}
 
-    toggleRaiseHand() {
-        if (this.streamOptions.hasWaitedOneSecondRaiseHand) {
-            this.waitOneSecondRaiseHand()
-            // this.sfxService.playAudio(SoundEffect.AskedToSpeak)
-            this.sendDataToRoom({
-                type: 'toggleRaiseHand',
-                userId: this.userData.id,
-                isHandRaised: true
-            })
-        }
-    }
+async function stopAudioStream(state = 'hibernate') {
+    await deleteLiveInput({ inputId: userData.audioStream?.uid })
+    userData.audioStream = null
+    userData.audioState = state
+    updateUserInRoom(userData)
+    sendDataToRoom({ type: 'toggleTrack', trackType: 'audio' })
+    detachTrack({ memberId: userData.id, trackType: 'audio' })
+    checkForActiveTracks()
+}
 
-    toggleSilenceOnEveryone() {
-        if (this.streamOptions.hasWaitedOneSecondSilence) {
-            this.waitOneSecondSilence()
-            this.streamOptions.isEveryoneSilenced = !this.streamOptions.isEveryoneSilenced
-            this.sendDataToRoom({
-                type: 'toggleSilenceOnEveryone',
-                isEveryoneSilenced: this.streamOptions.isEveryoneSilenced
-            })
-            //TODO: fix channel writeable
-            // channelStore.updateChannelProperties({
-            //     channelId: channelStore.currentChannel._id,
-            //     updatedProperties: {
-            //         isEveryoneSilenced: this.streamOptions.isEveryoneSilenced
-            //     }
-            // })
-        }
-    }
+//TODO: uncomment when adding video recording or when time limit for live streams
+function checkForActiveTracks() {
+    // hasActiveTracks = roomMembers.some(member => member.screenStream != null || member.webcamStream != null || member.audioStream != null)
+    // if (!hasActiveTracks) endRecording()
+}
 
-    toggleUserType({ user, isHandRaised = false }: { user: any, isHandRaised: boolean }) {
-        //TODO: fix channel writeable
-        // if (user.userType === 'listener' || isHandRaised) {
-        //     user.userType = 'participant'
-        //     user.isHandRaised = false
-        //     socketStore.emitRoomMemberUpdate({
-        //         channelId: channelStore.currentChannel._id,
-        //         userData: user,
-        //         isNewUser: true
-        //     })
-        // } else if (user.userType === 'participant') {
-        //     user.userType = 'listener'
-        //     socketStore.emitRoomMemberUpdate({
-        //         channelId: channelStore.currentChannel._id,
-        //         userData: user,
-        //         isNewUser: false
-        //     })
-        // }
-    }
+async function leaveRoom() {
+    // if (channelStore.currentChannel) {
+    disconnected()
+    stopObsStream()
+    stopScreenStream()
+    stopWebcamStream()
+    stopAudioStream()
+    //TODO: fix subscribring to room members writeable
+    // if (roomMembersSubscription) {
+    //     roomMembersSubscription.unsubscribe()
+    // }
+    // if (userActionsSubscription) {
+    //     userActionsSubscription.unsubscribe()
+    // }
+    // }
+}
 
-    toggleRestriction({ user, featureType }: { user: any, featureType: string }) {
-        let featureState = 'hibernate'
-        switch (featureType) {
-            case 'screen':
-                if (user.screenState === 'restricted') {
-                    featureState = 'hibernate'
-                } else {
-                    featureState = 'restricted'
-                }
-                user.screenState = featureState
-                break
-            case 'webcam':
-                if (user.webcamState === 'restricted') {
-                    featureState = 'hibernate'
-                } else {
-                    featureState = 'restricted'
-                }
-                user.webcamState = featureState
-                break
-            case 'audio':
-                if (user.audioState === 'restricted') {
-                    featureState = 'hibernate'
-                } else {
-                    featureState = 'restricted'
-                }
-                user.audioState = featureState
-                break
-        }
-        this.sendDataToRoom({
-            type: 'toggleRestriction',
-            userId: user.id,
-            featureType: featureType,
-            featureState: featureState
+function toggleRaiseHand() {
+    if (streamOptions.hasWaitedOneSecondRaiseHand) {
+        waitOneSecondRaiseHand()
+        // sfxService.playAudio(SoundEffect.AskedToSpeak)
+        sendDataToRoom({
+            type: 'toggleRaiseHand',
+            userId: userData.id,
+            isHandRaised: true
         })
     }
+}
 
-    sendDataToRoom(message: any) {
-        // if (channelStore.currentChannel) {
-        socketStore.emitUserActions({
-            channelId: '',//TODO: get channelId from writeable channelStore.currentChannel._id,
-            userData: this.userData,
-            message: JSON.stringify(message)
+function toggleSilenceOnEveryone() {
+    if (streamOptions.hasWaitedOneSecondSilence) {
+        waitOneSecondSilence()
+        streamOptions.isEveryoneSilenced = !streamOptions.isEveryoneSilenced
+        sendDataToRoom({
+            type: 'toggleSilenceOnEveryone',
+            isEveryoneSilenced: streamOptions.isEveryoneSilenced
         })
-        // }
+        //TODO: fix channel writeable
+        // channelStore.updateChannelProperties({
+        //     channelId: channelStore.currentChannel._id,
+        //     updatedProperties: {
+        //         isEveryoneSilenced: streamOptions.isEveryoneSilenced
+        //     }
+        // })
     }
+}
 
-    public waitOneSecondObs() {
-        this.streamOptions.hasWaitedOneSecondObs = false
-        setTimeout(async () => {
-            this.streamOptions.hasWaitedOneSecondObs = true
-        }, 1500)
-    }
+function toggleUserType({ user, isHandRaised = false }: { user: any, isHandRaised: boolean }) {
+    //TODO: fix channel writeable
+    // if (user.userType === 'listener' || isHandRaised) {
+    //     user.userType = 'participant'
+    //     user.isHandRaised = false
+    //     socketStore.emitRoomMemberUpdate({
+    //         channelId: channelStore.currentChannel._id,
+    //         userData: user,
+    //         isNewUser: true
+    //     })
+    // } else if (user.userType === 'participant') {
+    //     user.userType = 'listener'
+    //     socketStore.emitRoomMemberUpdate({
+    //         channelId: channelStore.currentChannel._id,
+    //         userData: user,
+    //         isNewUser: false
+    //     })
+    // }
+}
 
-    public waitOneSecondScreen() {
-        this.streamOptions.hasWaitedOneSecondScreen = false
-        setTimeout(async () => {
-            this.streamOptions.hasWaitedOneSecondScreen = true
-        }, 1500)
-    }
+function toggleRestriction({ user, featureType }: { user: any, featureType: string }) {
+    let featureState = 'hibernate'
+    switch (featureType) {
+        case 'screen':
+            if (user.screenState === 'restricted') {
+                featureState = 'hibernate'
+            } else {
+                featureState = 'restricted'
+            }
+            user.screenState = featureState
+            break
+        case 'webcam':
+            if (user.webcamState === 'restricted') {
+                featureState = 'hibernate'
+            } else {
+                featureState = 'restricted'
+            }
+            user.webcamState = featureState
+            break
+        case 'audio':
+            if (user.audioState === 'restricted') {
+                featureState = 'hibernate'
+            } else {
+                featureState = 'restricted'
+            }
+            user.audioState = featureState
+            break
+    }
+    sendDataToRoom({
+        type: 'toggleRestriction',
+        userId: user.id,
+        featureType: featureType,
+        featureState: featureState
+    })
+}
 
-    public waitOneSecondWebcam() {
-        this.streamOptions.hasWaitedOneSecondWebcam = false
-        setTimeout(async () => {
-            this.streamOptions.hasWaitedOneSecondWebcam = true
-        }, 1500)
-    }
+function sendDataToRoom(message: any) {
+    // if (channelStore.currentChannel) {
+    emitUserActions({
+        channelId: '',//TODO: get channelId from writeable channelStore.currentChannel._id,
+        userData: userData,
+        message: JSON.stringify(message)
+    })
+    // }
+}
 
-    public waitOneSecondAudio() {
-        this.streamOptions.hasWaitedOneSecondAudio = false
-        setTimeout(async () => {
-            this.streamOptions.hasWaitedOneSecondAudio = true
-        }, 1500)
-    }
+async function waitOneSecondObs() {
+    streamOptions.hasWaitedOneSecondObs = false
+    setTimeout(async () => {
+        streamOptions.hasWaitedOneSecondObs = true
+    }, 1500)
+}
 
-    public waitOneSecondRecord() {
-        this.streamOptions.hasWaitedOneSecondRecord = false
-        setTimeout(async () => {
-            this.streamOptions.hasWaitedOneSecondRecord = true
-        }, 1500)
-    }
+async function waitOneSecondScreen() {
+    streamOptions.hasWaitedOneSecondScreen = false
+    setTimeout(async () => {
+        streamOptions.hasWaitedOneSecondScreen = true
+    }, 1500)
+}
 
-    public waitOneSecondRaiseHand() {
-        this.streamOptions.hasWaitedOneSecondRaiseHand = false
-        setTimeout(async () => {
-            this.streamOptions.hasWaitedOneSecondRaiseHand = true
-        }, 3000)
-    }
+async function waitOneSecondWebcam() {
+    streamOptions.hasWaitedOneSecondWebcam = false
+    setTimeout(async () => {
+        streamOptions.hasWaitedOneSecondWebcam = true
+    }, 1500)
+}
 
-    public waitOneSecondSilence() {
-        this.streamOptions.hasWaitedOneSecondSilence = false
-        setTimeout(async () => {
-            this.streamOptions.hasWaitedOneSecondSilence = true
-        }, 3000)
-    }
+async function waitOneSecondAudio() {
+    streamOptions.hasWaitedOneSecondAudio = false
+    setTimeout(async () => {
+        streamOptions.hasWaitedOneSecondAudio = true
+    }, 1500)
+}
 
-    async createLiveStream({ channelId, title }: { channelId: string, title: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/streams`, {
-            method: 'POST',
-            body: JSON.stringify({ channel: channelId, title })
-        }).then(async response => {
-            const res = await response.json()
-            this.videoStreamId = res._id
-        })
-    }
+async function waitOneSecondRecord() {
+    streamOptions.hasWaitedOneSecondRecord = false
+    setTimeout(async () => {
+        streamOptions.hasWaitedOneSecondRecord = true
+    }, 1500)
+}
 
-    async updateLiveStream() {
-        if (this.videoStreamId) {
-            return await fetch(`${env.PUBLIC_API_URL}/streams/${this.videoStreamId}/end`, {})
-        }
-    }
+async function waitOneSecondRaiseHand() {
+    streamOptions.hasWaitedOneSecondRaiseHand = false
+    setTimeout(async () => {
+        streamOptions.hasWaitedOneSecondRaiseHand = true
+    }, 3000)
+}
 
-    async getLiveInput(trackData: any) {
-        return await fetch(`${env.PUBLIC_API_URL}/cloudflare/live-input`, {
-            method: 'POST',
-            body: JSON.stringify(trackData)
-        }).then(response => response.json())
-    }
+async function waitOneSecondSilence() {
+    streamOptions.hasWaitedOneSecondSilence = false
+    setTimeout(async () => {
+        streamOptions.hasWaitedOneSecondSilence = true
+    }, 3000)
+}
 
-    async deleteLiveInput({ inputId }: { inputId: string }) {
-        return await fetch(`${env.PUBLIC_API_URL}/cloudflare/live-input?inputId=${inputId}`, {
-            method: 'DELETE'
-        })
+async function createLiveStream({ channelId, title }: { channelId: string, title: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/streams`, {
+        method: 'POST',
+        body: JSON.stringify({ channel: channelId, title })
+    }).then(async response => {
+        const res = await response.json()
+        videoStreamId = res._id
+    })
+}
+
+async function updateLiveStream() {
+    if (videoStreamId) {
+        return await fetch(`${env.PUBLIC_API_URL}/streams/${videoStreamId}/end`, {})
     }
 }
 
-export const streamStore = new StreamStore()
\ No newline at end of file
+async function getLiveInput(trackData: any) {
+    return await fetch(`${env.PUBLIC_API_URL}/cloudflare/live-input`, {
+        method: 'POST',
+        body: JSON.stringify(trackData)
+    }).then(response => response.json())
+}
+
+async function deleteLiveInput({ inputId }: { inputId: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/cloudflare/live-input?inputId=${inputId}`, {
+        method: 'DELETE'
+    })
+}
+
+export {
+    initRoomMembers,
+    disconnected,
+    updateUserInRoom,
+    startObsStream,
+    stopObsStream,
+    startScreenStream,
+    stopScreenStream,
+    startWebcamStream,
+    stopWebcamStream,
+    startAudioStream,
+    stopAudioStream,
+    leaveRoom,
+    toggleRaiseHand,
+    toggleSilenceOnEveryone,
+    toggleUserType,
+    toggleRestriction,
+    waitOneSecondObs,
+    waitOneSecondScreen,
+    waitOneSecondWebcam,
+    waitOneSecondAudio,
+    waitOneSecondRecord,
+    waitOneSecondRaiseHand,
+    waitOneSecondSilence,
+    createLiveStream,
+    updateLiveStream,
+    getLiveInput,
+    deleteLiveInput
+}
\ No newline at end of file

From 536180026e8ad07aa3be6f178e1207c2abf77fb2 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 16 Jan 2023 04:34:42 +0000
Subject: [PATCH 04/19] Build(deps-dev): bump @sveltejs/adapter-cloudflare from
 1.0.0 to 1.0.3

Bumps [@sveltejs/adapter-cloudflare](https://github.com/sveltejs/kit/tree/HEAD/packages/adapter-cloudflare) from 1.0.0 to 1.0.3.
- [Release notes](https://github.com/sveltejs/kit/releases)
- [Changelog](https://github.com/sveltejs/kit/blob/master/packages/adapter-cloudflare/CHANGELOG.md)
- [Commits](https://github.com/sveltejs/kit/commits/@sveltejs/adapter-cloudflare@1.0.3/packages/adapter-cloudflare)

---
updated-dependencies:
- dependency-name: "@sveltejs/adapter-cloudflare"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cf165c2c..ca3728c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
 			},
 			"devDependencies": {
 				"@playwright/test": "1.29.2",
-				"@sveltejs/adapter-cloudflare": "^1.0.0",
+				"@sveltejs/adapter-cloudflare": "^1.0.3",
 				"@sveltejs/kit": "^1.0.11",
 				"@svitejs/svelte-preprocess-svg": "^2.0.0",
 				"@typescript-eslint/eslint-plugin": "^5.48.1",
@@ -540,9 +540,9 @@
 			"dev": true
 		},
 		"node_modules/@sveltejs/adapter-cloudflare": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-cloudflare/-/adapter-cloudflare-1.0.0.tgz",
-			"integrity": "sha512-uSFmMXI8vSM/f6duNgqfo6pkR1BBEcdzw1t1f56DsM2b/SQI0N7onY0yXpQA6LmDnWO/qdKp/TbRE0DuUt27LQ==",
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-cloudflare/-/adapter-cloudflare-1.0.3.tgz",
+			"integrity": "sha512-VEovpRDZc/5xS8NJhGoLhHIuP8Li4+uKFp29R6ndw1eI9j8Dcgwr6tO4axmsgsCnSkkWj7U5j3iAyh6jaZ2A7g==",
 			"dev": true,
 			"dependencies": {
 				"@cloudflare/workers-types": "^4.20221111.1",
diff --git a/package.json b/package.json
index 2b557be9..2d832f43 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
 	},
 	"devDependencies": {
 		"@playwright/test": "1.29.2",
-		"@sveltejs/adapter-cloudflare": "^1.0.0",
+		"@sveltejs/adapter-cloudflare": "^1.0.3",
 		"@svitejs/svelte-preprocess-svg": "^2.0.0",
 		"@sveltejs/kit": "^1.0.11",
 		"@typescript-eslint/eslint-plugin": "^5.48.1",

From ae30e9cfac47d17197d53bfc1214863863543cdc Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 16 Jan 2023 04:35:03 +0000
Subject: [PATCH 05/19] Build(deps-dev): bump eslint from 8.31.0 to 8.32.0

Bumps [eslint](https://github.com/eslint/eslint) from 8.31.0 to 8.32.0.
- [Release notes](https://github.com/eslint/eslint/releases)
- [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md)
- [Commits](https://github.com/eslint/eslint/compare/v8.31.0...v8.32.0)

---
updated-dependencies:
- dependency-name: eslint
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ca3728c6..6a8e2769 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
 				"autoprefixer": "^10.4.13",
 				"concurrently": "^7.6.0",
 				"cross-env": "^7.0.3",
-				"eslint": "^8.31.0",
+				"eslint": "^8.32.0",
 				"eslint-config-prettier": "^8.3.0",
 				"eslint-plugin-svelte3": "^4.0.0",
 				"postcss": "^8.4.21",
@@ -1742,9 +1742,9 @@
 			}
 		},
 		"node_modules/eslint": {
-			"version": "8.31.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.31.0.tgz",
-			"integrity": "sha512-0tQQEVdmPZ1UtUKXjX7EMm9BlgJ08G90IhWh0PKDCb3ZLsgAOHI8fYSIzYVZej92zsgq+ft0FGsxhJ3xo2tbuA==",
+			"version": "8.32.0",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz",
+			"integrity": "sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==",
 			"dev": true,
 			"dependencies": {
 				"@eslint/eslintrc": "^1.4.1",
diff --git a/package.json b/package.json
index 2d832f43..60521ae5 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
 		"autoprefixer": "^10.4.13",
 		"concurrently": "^7.6.0",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.31.0",
+		"eslint": "^8.32.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.21",

From b65bb34e28e6cbe167da098e36aa0db5883d9b09 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 16 Jan 2023 04:35:49 +0000
Subject: [PATCH 06/19] Build(deps-dev): bump prettier from 2.8.2 to 2.8.3

Bumps [prettier](https://github.com/prettier/prettier) from 2.8.2 to 2.8.3.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/2.8.2...2.8.3)

---
updated-dependencies:
- dependency-name: prettier
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6a8e2769..f1554aec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
 				"eslint-plugin-svelte3": "^4.0.0",
 				"postcss": "^8.4.21",
 				"postcss-cli": "^10.1.0",
-				"prettier": "^2.8.2",
+				"prettier": "^2.8.3",
 				"prettier-plugin-svelte": "^2.9.0",
 				"svelte": "^3.55.1",
 				"svelte-check": "^3.0.2",
@@ -3078,9 +3078,9 @@
 			}
 		},
 		"node_modules/prettier": {
-			"version": "2.8.2",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.2.tgz",
-			"integrity": "sha512-BtRV9BcncDyI2tsuS19zzhzoxD8Dh8LiCx7j7tHzrkz8GFXAexeWFdi22mjE1d16dftH2qNaytVxqiRTGlMfpw==",
+			"version": "2.8.3",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
+			"integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
 			"dev": true,
 			"bin": {
 				"prettier": "bin-prettier.js"
diff --git a/package.json b/package.json
index 60521ae5..44c80171 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.21",
 		"postcss-cli": "^10.1.0",
-		"prettier": "^2.8.2",
+		"prettier": "^2.8.3",
 		"prettier-plugin-svelte": "^2.9.0",
 		"svelte": "^3.55.1",
 		"svelte-check": "^3.0.2",

From ef6225c35f1d846c98b82ace0f4b8d41186d51ac Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 16 Jan 2023 04:36:56 +0000
Subject: [PATCH 07/19] Build(deps-dev): bump @sveltejs/kit from 1.0.11 to
 1.1.1

Bumps [@sveltejs/kit](https://github.com/sveltejs/kit/tree/HEAD/packages/kit) from 1.0.11 to 1.1.1.
- [Release notes](https://github.com/sveltejs/kit/releases)
- [Changelog](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md)
- [Commits](https://github.com/sveltejs/kit/commits/@sveltejs/kit@1.1.1/packages/kit)

---
updated-dependencies:
- dependency-name: "@sveltejs/kit"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 24 ++++++++++++------------
 package.json      |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f1554aec..d2630b58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
 			"devDependencies": {
 				"@playwright/test": "1.29.2",
 				"@sveltejs/adapter-cloudflare": "^1.0.3",
-				"@sveltejs/kit": "^1.0.11",
+				"@sveltejs/kit": "^1.1.1",
 				"@svitejs/svelte-preprocess-svg": "^2.0.0",
 				"@typescript-eslint/eslint-plugin": "^5.48.1",
 				"@typescript-eslint/parser": "^5.48.1",
@@ -554,16 +554,16 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "1.0.11",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.11.tgz",
-			"integrity": "sha512-FcbR2/jlKtSfFBXwnqgpWnoOG54foLQB2esdkkdz7uei0+KnK5ulWZw0lJbMzXTy7kfxRvH1spxlXoBpPizUqg==",
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.1.1.tgz",
+			"integrity": "sha512-5hZef6yTqiLm8fLMFD78udJI3pG9ptSndg3NNmDqxv5fS9KFABkASQwnWB25Pf1HkPNqvL+x4Tl8kyW1N8thKQ==",
 			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
 				"@sveltejs/vite-plugin-svelte": "^2.0.0",
 				"@types/cookie": "^0.5.1",
 				"cookie": "^0.5.0",
-				"devalue": "^4.2.0",
+				"devalue": "^4.2.2",
 				"esm-env": "^1.0.0",
 				"kleur": "^4.1.5",
 				"magic-string": "^0.27.0",
@@ -572,7 +572,7 @@
 				"set-cookie-parser": "^2.5.1",
 				"sirv": "^2.0.2",
 				"tiny-glob": "^0.2.9",
-				"undici": "5.14.0"
+				"undici": "5.15.0"
 			},
 			"bin": {
 				"svelte-kit": "svelte-kit.js"
@@ -1561,9 +1561,9 @@
 			}
 		},
 		"node_modules/devalue": {
-			"version": "4.2.0",
-			"resolved": "https://registry.npmjs.org/devalue/-/devalue-4.2.0.tgz",
-			"integrity": "sha512-mbjoAaCL2qogBKgeFxFPOXAUsZchircF+B/79LD4sHH0+NHfYm8gZpQrskKDn5gENGt35+5OI1GUF7hLVnkPDw==",
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/devalue/-/devalue-4.2.2.tgz",
+			"integrity": "sha512-Pkwd8qrI9O20VJ14fBNHu+on99toTNZFbgWRpZbC0zbDXpnE2WHYcrC1fHhMsF/3Ee+2yaW7vEujAT7fCYgqrA==",
 			"dev": true
 		},
 		"node_modules/didyoumean": {
@@ -3879,9 +3879,9 @@
 			}
 		},
 		"node_modules/undici": {
-			"version": "5.14.0",
-			"resolved": "https://registry.npmjs.org/undici/-/undici-5.14.0.tgz",
-			"integrity": "sha512-yJlHYw6yXPPsuOH0x2Ib1Km61vu4hLiRRQoafs+WUgX1vO64vgnxiCEN9dpIrhZyHFsai3F0AEj4P9zy19enEQ==",
+			"version": "5.15.0",
+			"resolved": "https://registry.npmjs.org/undici/-/undici-5.15.0.tgz",
+			"integrity": "sha512-wCAZJDyjw9Myv+Ay62LAoB+hZLPW9SmKbQkbHIhMw/acKSlpn7WohdMUc/Vd4j1iSMBO0hWwU8mjB7a5p5bl8g==",
 			"dev": true,
 			"dependencies": {
 				"busboy": "^1.6.0"
diff --git a/package.json b/package.json
index 44c80171..d0b6ae8a 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
 		"@playwright/test": "1.29.2",
 		"@sveltejs/adapter-cloudflare": "^1.0.3",
 		"@svitejs/svelte-preprocess-svg": "^2.0.0",
-		"@sveltejs/kit": "^1.0.11",
+		"@sveltejs/kit": "^1.1.1",
 		"@typescript-eslint/eslint-plugin": "^5.48.1",
 		"@typescript-eslint/parser": "^5.48.1",
 		"autoprefixer": "^10.4.13",

From e0520c7533d187c4916a56521ec7657beecaefe9 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Mon, 16 Jan 2023 16:31:55 -0600
Subject: [PATCH 08/19] Fix: authentication failure due to header naming

---
 src/app.d.ts                              | 20 +++----
 src/hooks.server.ts                       | 66 +++++++++++------------
 src/lib/assets/styles/tailwind-output.css | 27 ++++------
 src/lib/stores/authStore.ts               | 41 +++++++-------
 4 files changed, 76 insertions(+), 78 deletions(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index ed2cddb3..e87d36eb 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -3,14 +3,14 @@
 // and what to do when importing types
 
 declare namespace App {
-	interface Locals {
-		user: {
-			token?: string
-			userId?: string
-			user?: object
-		}
-	}
-	// interface PageData {}
-	// interface Error {}
-	// interface Platform {}
+    interface Locals {
+        user: {
+            token?: string
+            userId?: string
+            user?: object
+        }
+    }
+    // interface PageData {}
+    // interface Error {}
+    // interface Platform {}
 }
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index c5e52a12..e7705cc1 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -2,39 +2,39 @@ import { getUserDetails } from '$lib/stores/authStore'
 import type { Handle } from '@sveltejs/kit'
 
 export const handle: Handle = async ({ event, resolve }) => {
-	const userId = event.url.searchParams.get('userId') || event.cookies.get('userId')
-	let token = event.url.searchParams.get('token') || event.cookies.get('token')
-	let user
-
-	if (event.locals && event.locals.user) {
-		user = event.locals.user.user
-	}
-
-	if (!token || !userId) {
-		return await resolve(event)
-	}
-
-	if (token && userId) {
-		if (!user) {
-			const response = await getUserDetails(token, userId)
-			if (response) {
-				if (response.freshJwt) {
-					token = response.freshJwt
-				}
-				user = response.user
-			}
-		}
-
-		event.cookies.set('token', token)
-		event.cookies.set('userId', userId)
-		event.locals.user = {
-			userId,
-			token,
-			user
-		}
-	}
-
-	return await resolve(event)
+    const userId = event.url.searchParams.get('userId') || event.cookies.get('userId')
+    let token = event.url.searchParams.get('token') || event.cookies.get('token') || ''
+    let user
+
+    if (event.locals && event.locals.user) {
+        user = event.locals.user.user
+    }
+
+    if (!token || !userId) {
+        return await resolve(event)
+    }
+
+    if (token && userId) {
+        if (!user) {
+            const response = await getUserDetails(token, userId)
+            if (response) {
+                if (response.freshJwt) {
+                    token = response.freshJwt
+                }
+                user = response.user
+            }
+        }
+
+        event.cookies.set('token', token)
+        event.cookies.set('userId', userId)
+        event.locals.user = {
+            userId,
+            token,
+            user
+        }
+    }
+
+    return await resolve(event)
 }
 
 // import { remoteConfigStore } from '$lib/stores/remoteConfigStore'
diff --git a/src/lib/assets/styles/tailwind-output.css b/src/lib/assets/styles/tailwind-output.css
index f0bb4698..e8fec05c 100644
--- a/src/lib/assets/styles/tailwind-output.css
+++ b/src/lib/assets/styles/tailwind-output.css
@@ -1391,15 +1391,6 @@ html {
   margin-top: 1.5rem;
   justify-content: flex-end;
 }
-.modal-toggle {
-  position: fixed;
-  height: 0px;
-  width: 0px;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  opacity: 0;
-}
 .navbar {
   display: flex;
   align-items: center;
@@ -3354,9 +3345,9 @@ html {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
 }
-.px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 .px-6 {
   padding-left: 1.5rem;
@@ -3370,10 +3361,6 @@ html {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
 .pt-16 {
   padding-top: 4rem;
 }
@@ -3756,6 +3743,14 @@ html {
   }
 }
 
+@media (min-width: 768px) {
+
+  .md\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+}
+
 @media (min-width: 1024px) {
 
   .lg\:order-2 {
diff --git a/src/lib/stores/authStore.ts b/src/lib/stores/authStore.ts
index 5127b744..354b081d 100644
--- a/src/lib/stores/authStore.ts
+++ b/src/lib/stores/authStore.ts
@@ -4,23 +4,26 @@ import { writable, type Writable } from 'svelte/store'
 export const currentUser: Writable<any> = writable(null)
 
 async function getUserDetails(jwt: string, userId: string) {
-	if (!jwt || !userId) {
-		return null
-	} else {
-		return await fetch(`${env.PUBLIC_API_URL}/auth/me`, {
-			method: 'GET',
-			headers: {
-				authorization: jwt,
-				user_id: userId
-			}
-		})
-			.then(async (response) => {
-				const res = await response.json()
-				return res.user
-			})
-			.catch(() => {
-				return null
-			})
-	}
+    if (!jwt || !userId) {
+        return null
+    } else {
+        return await fetch(`${env.PUBLIC_API_URL}/auth/me`, {
+            method: 'GET',
+            headers: {
+                authorization: jwt,
+                userId
+            }
+        })
+            .then(async (response) => {
+                const res = await response.json()
+                return res.user
+            })
+            .catch(() => {
+                return null
+            })
+    }
+}
+
+export {
+    getUserDetails
 }
-export { getUserDetails }

From d01867f3d7c441b89bf80a6709e6f77622cace13 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Mon, 16 Jan 2023 20:24:52 -0600
Subject: [PATCH 09/19] Fix: removed duplicated route guard code

---
 src/hooks.server.ts         | 98 ++++++++-----------------------------
 src/lib/stores/authStore.ts | 12 ++---
 2 files changed, 25 insertions(+), 85 deletions(-)

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index e7705cc1..19900a18 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -37,91 +37,33 @@ export const handle: Handle = async ({ event, resolve }) => {
     return await resolve(event)
 }
 
-// import { remoteConfigStore } from '$lib/stores/remoteConfigStore'
-// import type { Handle, HandleServerError, RequestEvent } from '@sveltejs/kit'
-// import type { MaybePromise } from '@sveltejs/kit/types/private'
-// import { authStore } from '$lib/stores/authStore'
-
-// export const handle = (async ({ event, resolve }: { event: RequestEvent, resolve: MaybePromise<Response> }) => {
-//     const isAdminPage = /^\/admin\/(.*)/.test(event.url.pathname)
-//     const isHomePage = /^\/home\/(.*)/.test(event.url.pathname)
-//     const isProfilePage = /^\/profile\/(.*)/.test(event.url.pathname)
-//     const isPremiumPage = /^\/premium\/(.*)/.test(event.url.pathname)
-//     const isChannelPage = /^\/channel\/(.*)/.test(event.url.pathname)
-//     await remoteConfigStore.getRemoteConfigs()
-//     const isMaintenanceModeEnabled = remoteConfigStore.isMaintenanceModeEnabled
-
-//     const jwtToken = event.url.searchParams.get('token')
-//     const userId = event.url.searchParams.get('userId')
-
-//     if (jwtToken) authStore.setJWT({ jwt: jwtToken })
-//     if (userId) authStore.setUserId({ userId })
-//     const user = await authStore.me()
-//     if (user) {
-//         if (user.status == 401 || user.status == 500) {
-//             await authStore.logout()
-//         } else if (user.isBanned) {
-//             // this.snackBar.open(
-//             //     'Your account is banned. Please contact support if you have any questions',
-//             //     null,
-//             //     { duration: 10000 }
-//             // )
-//             await authStore.logout()
-//         } else {
-//             // try {
-//             //     const onConnectionSuccess = async () => {
-//             //         await this.socket.emitUserConnection(user._id, true)
-//             //         this.socket.listenToUserConnection(user._id).subscribe(async (data) => {
-//             //             authStore.setUser(data.user)
-//             //         })
-//             //     }
-//             //     if (this.socket.apiSocket.readyState == WebSocket.OPEN) await onConnectionSuccess()
 
-//             // } catch (e) {
-//             //     console.log(e)
-//             // }
-//             return {
-//                 status: 302,
-//                 redirect: '/home'
-//             }
-//         }
+// const isAdminPage = /^\/admin\/(.*)/.test(route.id)
+// const isProfilePage = /^\/profile\/(.*)/.test(route.id)
+// const isPremiumPage = /^\/premium\/(.*)/.test(route.id)
+// await getRemoteConfigs()
+// if (isMaintenanceModeEnabled) {
+//     if (locals.user.user.isAdmin) {
+//         throw redirect(302, '/maintenance')
+//     }
+// } else {
+//     if (!locals.user) {
+//         throw redirect(302, '/browse')
 //     } else {
-//         return {
-//             status: 302,
-//             redirect: '/login'
+//         if (locals.user.user.isBanned) {
+//             throw redirect(308, '/banned')
+//         }
+
+//         if (isAdminPage && !locals.user.user.isAdmin) {
+//             throw redirect(302, '/browse')
 //         }
 //     }
+// }
+
+
 
-//     // if (
-//     //     !event.locals.session.user &&
-//     //     (isAdminPage || isHomePage || isProfilePage || isPremiumPage || isChannelPage)
-//     // ) {
-//     //     return {
-//     //         status: 302,
-//     //         redirect: '/login'
-//     //     }
-//     // } else {
-//     //     if (isMaintenanceModeEnabled) {
-//     //         if (!event.locals.session.user.isAdmin) {
-//     //             return {
-//     //                 status: 302,
-//     //                 redirect: '/maintenance'
-//     //             }
-//     //         } else return { props: {} }
-//     //     } else return { props: {} }
-//     // }
-// })
 
-// export const handleError = (({ error, event }) => {
-//     const errorId = crypto.randomUUID();
-//     // example integration with https://sentry.io/
-//     // Sentry.captureException(error, { event, errorId });
 
-//     return {
-//         message: 'Whoops!',
-//         errorId
-//     };
-// }) satisfies HandleServerError;
 
 // import { remoteConfigStore } from '$lib/stores/remoteConfigStore'
 // import type { Handle, HandleServerError, RequestEvent } from '@sveltejs/kit'
diff --git a/src/lib/stores/authStore.ts b/src/lib/stores/authStore.ts
index 354b081d..e00a9821 100644
--- a/src/lib/stores/authStore.ts
+++ b/src/lib/stores/authStore.ts
@@ -13,14 +13,12 @@ async function getUserDetails(jwt: string, userId: string) {
                 authorization: jwt,
                 userId
             }
+        }).then(async response => {
+            const res = await response.json()
+            return res.user
+        }).catch(() => {
+            return null
         })
-            .then(async (response) => {
-                const res = await response.json()
-                return res.user
-            })
-            .catch(() => {
-                return null
-            })
     }
 }
 

From d20a2a2b56a307533873ffc8bd6130762e6d6a2f Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Tue, 17 Jan 2023 01:23:35 -0600
Subject: [PATCH 10/19] Chore: moved LoginPrompt to MainDrawer folder

---
 src/lib/assets/styles/tailwind-output.css        | 16 ----------------
 .../{Browse => MainDrawer}/LoginPrompt.svelte    |  0
 src/routes/+layout.svelte                        |  2 +-
 src/routes/+page.svelte                          | 11 -----------
 4 files changed, 1 insertion(+), 28 deletions(-)
 rename src/lib/components/{Browse => MainDrawer}/LoginPrompt.svelte (100%)

diff --git a/src/lib/assets/styles/tailwind-output.css b/src/lib/assets/styles/tailwind-output.css
index e8fec05c..72a298fe 100644
--- a/src/lib/assets/styles/tailwind-output.css
+++ b/src/lib/assets/styles/tailwind-output.css
@@ -3621,61 +3621,49 @@ html {
 .scrollbar-thumb-rounded::-webkit-scrollbar-thumb {
   border-radius: 0.25rem;
 }
-
 .focus\:border:focus {
   border-width: 1px;
 }
-
 .focus\:border-indigo-700:focus {
   --tw-border-opacity: 1;
   border-color: rgb(67 56 202 / var(--tw-border-opacity));
 }
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-
 .focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 .focus\:ring-white:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
-
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
-
 .hover\:bg-blue-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
-
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
-
 .hover\:text-blue-700:hover {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
 }
-
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
-
 @media (prefers-color-scheme: dark) {
 
   .dark\:border-gray-700 {
@@ -3723,7 +3711,6 @@ html {
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 }
-
 @media (min-width: 640px) {
 
   .sm\:col-span-2 {
@@ -3742,7 +3729,6 @@ html {
     gap: 1.5rem;
   }
 }
-
 @media (min-width: 768px) {
 
   .md\:px-10 {
@@ -3750,7 +3736,6 @@ html {
     padding-right: 2.5rem;
   }
 }
-
 @media (min-width: 1024px) {
 
   .lg\:order-2 {
@@ -3822,7 +3807,6 @@ html {
     text-align: right;
   }
 }
-
 @media (min-width: 1280px) {
 
   .xl\:mb-0 {
diff --git a/src/lib/components/Browse/LoginPrompt.svelte b/src/lib/components/MainDrawer/LoginPrompt.svelte
similarity index 100%
rename from src/lib/components/Browse/LoginPrompt.svelte
rename to src/lib/components/MainDrawer/LoginPrompt.svelte
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c06d44aa..1e0e40c8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -29,7 +29,7 @@
 	import IconSocialDiscord from '$lib/assets/icons/social/IconSocialDiscord.svelte'
 	import IconSocialGitHub from '$lib/assets/icons/social/IconSocialGitHub.svelte'
 	import IconDrawerAdmin from '$lib/assets/icons/drawer/IconDrawerAdmin.svelte'
-	import LoginPrompt from '$lib/components/Browse/LoginPrompt.svelte'
+	import LoginPrompt from '$lib/components/MainDrawer/LoginPrompt.svelte'
 	NProgress.configure({
 		minimum: 0.75,
 		showSpinner: false,
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f46fbd45..e69de29b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,11 +0,0 @@
-<script>
-	import IconLaunch from '../lib/assets/icons/IconLaunch.svelte'
-	import LoginPrompt from '../lib/components/Browse/LoginPrompt.svelte'
-</script>
-
-<div class="hero min-h-screen flex justify-center">
-	<!-- The button to open modal -->
-	<!-- <label for="my-modal-4" class="btn btn-primary gap-4"> <IconLaunch /> Launch dApp</label>
-
-	<LoginPrompt /> -->
-</div>

From ee83954f8d3837db628cf9b8214f8a9407241292 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Tue, 17 Jan 2023 04:21:51 -0600
Subject: [PATCH 11/19] Fix: updated window location for oauth

---
 src/lib/assets/styles/tailwind-output.css        | 16 ++++++++++++++++
 src/lib/components/MainDrawer/LoginPrompt.svelte |  4 +---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/lib/assets/styles/tailwind-output.css b/src/lib/assets/styles/tailwind-output.css
index 72a298fe..e8fec05c 100644
--- a/src/lib/assets/styles/tailwind-output.css
+++ b/src/lib/assets/styles/tailwind-output.css
@@ -3621,49 +3621,61 @@ html {
 .scrollbar-thumb-rounded::-webkit-scrollbar-thumb {
   border-radius: 0.25rem;
 }
+
 .focus\:border:focus {
   border-width: 1px;
 }
+
 .focus\:border-indigo-700:focus {
   --tw-border-opacity: 1;
   border-color: rgb(67 56 202 / var(--tw-border-opacity));
 }
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+
 .focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+
 .focus\:ring-white:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
+
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
+
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
+
 .hover\:bg-blue-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
+
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
+
 .hover\:text-blue-700:hover {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
 }
+
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
+
 @media (prefers-color-scheme: dark) {
 
   .dark\:border-gray-700 {
@@ -3711,6 +3723,7 @@ html {
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 }
+
 @media (min-width: 640px) {
 
   .sm\:col-span-2 {
@@ -3729,6 +3742,7 @@ html {
     gap: 1.5rem;
   }
 }
+
 @media (min-width: 768px) {
 
   .md\:px-10 {
@@ -3736,6 +3750,7 @@ html {
     padding-right: 2.5rem;
   }
 }
+
 @media (min-width: 1024px) {
 
   .lg\:order-2 {
@@ -3807,6 +3822,7 @@ html {
     text-align: right;
   }
 }
+
 @media (min-width: 1280px) {
 
   .xl\:mb-0 {
diff --git a/src/lib/components/MainDrawer/LoginPrompt.svelte b/src/lib/components/MainDrawer/LoginPrompt.svelte
index 3afb63cb..53c370d2 100644
--- a/src/lib/components/MainDrawer/LoginPrompt.svelte
+++ b/src/lib/components/MainDrawer/LoginPrompt.svelte
@@ -9,13 +9,11 @@
 	async function getHref(provider: string) {
 		return await fetch(`${env.PUBLIC_API_URL}/auth/${provider}`, {
 			headers: {
-				Accept: '*/*',
 				'x-api-key': env.PUBLIC_X_API_KEY
 			}
 		}).then(async (response) => {
 			console.log(response)
-			window.open(response.url)
-			return response.url
+			window.location.href = response.url
 		})
 	}
 </script>

From c6c559806d1450f8bd22e5d5b4a358df0c840ef1 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Tue, 17 Jan 2023 13:42:15 -0600
Subject: [PATCH 12/19] Fix: input and textarea theming

---
 src/lib/assets/styles/tailwind-output.css | 110 ++++++++++++++++++++++
 src/routes/contact/+page.svelte           |  10 +-
 src/routes/settings/+page.svelte          |   2 +-
 3 files changed, 116 insertions(+), 6 deletions(-)

diff --git a/src/lib/assets/styles/tailwind-output.css b/src/lib/assets/styles/tailwind-output.css
index e8fec05c..d2ae440c 100644
--- a/src/lib/assets/styles/tailwind-output.css
+++ b/src/lib/assets/styles/tailwind-output.css
@@ -1848,6 +1848,41 @@ html {
 .btn-secondary:focus-visible {
   outline: 2px solid hsl(var(--s));
 }
+.btn-accent:hover,
+    .btn-accent.btn-active {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--af, var(--a)) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity));
+}
+.btn-info:hover,
+    .btn-info.btn-active {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--in) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--in) / var(--tw-bg-opacity));
+}
+.btn-success:hover,
+    .btn-success.btn-active {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--su) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--su) / var(--tw-bg-opacity));
+}
+.btn-warning:hover,
+    .btn-warning.btn-active {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--wa) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
+}
+.btn-error:hover,
+    .btn-error.btn-active {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--er) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--er) / var(--tw-bg-opacity));
+}
 .btn.glass:hover,
     .btn.glass.btn-active {
   --glass-opacity: 25%;
@@ -1871,6 +1906,12 @@ html {
 .btn-ghost:focus-visible {
   outline: 2px solid currentColor;
 }
+.btn-link:hover,
+    .btn-link.btn-active {
+  border-color: transparent;
+  background-color: transparent;
+  text-decoration-line: underline;
+}
 .btn-outline {
   border-color: currentColor;
   background-color: transparent;
@@ -2623,10 +2664,20 @@ html {
 :where(.table *:last-child) :where(*:last-child) :where(th, td):last-child {
   border-bottom-right-radius: 0.5rem;
 }
+.textarea-bordered {
+  --tw-border-opacity: 0.2;
+}
 .textarea:focus {
   outline: 2px solid hsla(var(--bc) / 0.2);
   outline-offset: 2px;
 }
+.textarea-primary {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--p) / var(--tw-border-opacity));
+}
+.textarea-primary:focus {
+  outline: 2px solid hsl(var(--p));
+}
 .textarea-info {
   --tw-border-opacity: 1;
   border-color: hsl(var(--in) / var(--tw-border-opacity));
@@ -2747,6 +2798,28 @@ html {
 .rounded-box {
   border-radius: var(--rounded-box, 1rem);
 }
+.glass,
+  .glass:hover,
+  .glass.btn-active {
+  border: none;
+  -webkit-backdrop-filter: blur(var(--glass-blur, 40px));
+          backdrop-filter: blur(var(--glass-blur, 40px));
+  background-color: transparent;
+  background-image: linear-gradient(
+        135deg,
+        rgb(255 255 255 / var(--glass-opacity, 30%)) 0%,
+        rgb(0 0 0 / 0%) 100%
+      ),
+      linear-gradient(
+        var(--glass-reflex-degree, 100deg),
+        rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%,
+        rgb(0 0 0 / 0%) 25%
+      );
+  box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%))
+        inset,
+      0 0 0 2px rgb(0 0 0 / 5%);
+  text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%));
+}
 .badge-sm {
   height: 1rem;
   font-size: 0.75rem;
@@ -3138,6 +3211,40 @@ html {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+@keyframes bounce {
+
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
+@keyframes pulse {
+
+  50% {
+    opacity: .5;
+  }
+}
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+@keyframes ping {
+
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+.animate-ping {
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -3159,6 +3266,9 @@ html {
 .items-center {
   align-items: center;
 }
+.justify-start {
+  justify-content: flex-start;
+}
 .justify-end {
   justify-content: flex-end;
 }
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 52f836de..9c3c9fbb 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -52,8 +52,8 @@
 								id="full_name"
 								name="full_name"
 								type="text"
-								class="focus:outline-none focus:border focus:border-indigo-700 font-normal w-64 h-10 flex items-center pl-3 text-sm border-gray-300 rounded border"
-								placeholder="Full Name"
+								class="input input-bordered input-primary w-64 h-10 flex"
+								placeholder="Elizabeth Caledonia"
 								aria-label="enter your full name input" />
 						</div>
 					</div>
@@ -66,7 +66,7 @@
 								id="email"
 								name="email"
 								type="email"
-								class="focus:outline-none focus:border focus:border-indigo-700 font-normal w-64 h-10 flex items-center pl-3 text-sm border-gray-300 rounded border"
+								class="input input-bordered input-primary w-64 h-10 flex"
 								placeholder="example@email.com"
 								aria-label="enter your email input" />
 						</div>
@@ -82,7 +82,7 @@
 								id="subject"
 								name="subject"
 								type="tel"
-								class="focus:outline-none focus:border focus:border-indigo-700 font-normal w-64 h-10 flex items-center pl-3 text-sm border-gray-300 rounded border"
+								class="input input-bordered input-primary w-64 h-10 flex"
 								placeholder="Subject"
 								aria-label="enter a subject" />
 						</div>
@@ -94,7 +94,7 @@
 						<textarea
 							placeholder=""
 							name="message"
-							class="border-gray-300 border mb-4 rounded py-2 text-sm outline-none resize-none px-3 focus:border focus:border-indigo-700"
+							class="textarea textarea-bordered textarea-primary flex mb-4 py-2 px-3"
 							rows="8"
 							id="message"
 							aria-label="enter your message input" />
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index b7bf96b2..b4f6d0d5 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -22,7 +22,7 @@
 						name="email"
 						type="email"
 						placeholder="nerf-this@gamer.com"
-						class="input input-bordered" />
+						class="input input-bordered input-primary w-72" />
 					<button class="btn btn-primary">Save</button>
 				</label>
 			</div>

From d21e5ceefedec88c2aa174f4bbcc750285665a2e Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Tue, 17 Jan 2023 17:14:26 -0600
Subject: [PATCH 13/19] Feat: added placeholder components

---
 src/lib/components/Browse/AddCategory.svelte  |  0
 .../components/Browse/ChannelSearch.svelte    | 22 +++++++++++++++++++
 ...ChannelList.svelte => ChannelTable.svelte} | 20 -----------------
 src/lib/components/Browse/Section.svelte      |  0
 .../{Browse => MainDrawer}/Community.svelte   |  0
 .../{Browse => MainDrawer}/Messages.svelte    |  0
 src/lib/components/Profile/Stats.svelte       |  0
 src/routes/+layout.svelte                     | 20 ++++++++---------
 src/routes/browse/+page.svelte                |  2 +-
 src/routes/browse/[sectionId]/+page.server.ts |  0
 src/routes/browse/[sectionId]/+page.svelte    |  0
 .../profile/[customUsername]/+page.svelte     |  2 +-
 12 files changed, 34 insertions(+), 32 deletions(-)
 create mode 100644 src/lib/components/Browse/AddCategory.svelte
 create mode 100644 src/lib/components/Browse/ChannelSearch.svelte
 rename src/lib/components/Browse/{ChannelList.svelte => ChannelTable.svelte} (89%)
 create mode 100644 src/lib/components/Browse/Section.svelte
 rename src/lib/components/{Browse => MainDrawer}/Community.svelte (100%)
 rename src/lib/components/{Browse => MainDrawer}/Messages.svelte (100%)
 create mode 100644 src/lib/components/Profile/Stats.svelte
 create mode 100644 src/routes/browse/[sectionId]/+page.server.ts
 create mode 100644 src/routes/browse/[sectionId]/+page.svelte

diff --git a/src/lib/components/Browse/AddCategory.svelte b/src/lib/components/Browse/AddCategory.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/src/lib/components/Browse/ChannelSearch.svelte b/src/lib/components/Browse/ChannelSearch.svelte
new file mode 100644
index 00000000..616b08fc
--- /dev/null
+++ b/src/lib/components/Browse/ChannelSearch.svelte
@@ -0,0 +1,22 @@
+<script>
+	import IconCreate from '$lib/assets/icons/IconCreate.svelte'
+	import IconSearch from '$lib/assets/icons/IconSearch.svelte'
+</script>
+
+<div class="flex gap-4 py-5 pl-5">
+	<div class="form-control">
+		<div class="input-group">
+			<input
+				type="text"
+				placeholder="Search channels"
+				class="input input-bordered input-primary w-72" />
+			<button class="btn btn-square">
+				<IconSearch />
+			</button>
+		</div>
+	</div>
+
+	<button class="btn btn-wide btn-primary gap-2">
+		<IconCreate />
+		Create a channel</button>
+</div>
diff --git a/src/lib/components/Browse/ChannelList.svelte b/src/lib/components/Browse/ChannelTable.svelte
similarity index 89%
rename from src/lib/components/Browse/ChannelList.svelte
rename to src/lib/components/Browse/ChannelTable.svelte
index b746fb81..f1c5245a 100644
--- a/src/lib/components/Browse/ChannelList.svelte
+++ b/src/lib/components/Browse/ChannelTable.svelte
@@ -1,28 +1,8 @@
 <script>
-	import IconCreate from '$lib/assets/icons/IconCreate.svelte'
-	import IconSearch from '$lib/assets/icons/IconSearch.svelte'
 	import IconLock from '$lib/assets/icons/IconLock.svelte'
 	import IconViewers from '$lib/assets/icons/IconViewers.svelte'
 </script>
 
-<div class="flex gap-4 py-5 pl-5">
-	<div class="form-control">
-		<div class="input-group">
-			<input
-				type="text"
-				placeholder="Search channels"
-				class="input input-bordered input-primary w-72" />
-			<button class="btn btn-square">
-				<IconSearch />
-			</button>
-		</div>
-	</div>
-
-	<button class="btn btn-wide btn-primary gap-2">
-		<IconCreate />
-		Create a channel</button>
-</div>
-
 <div class="overflow-x-auto w-full">
 	<table class="table table-zebra w-full">
 		<!-- head -->
diff --git a/src/lib/components/Browse/Section.svelte b/src/lib/components/Browse/Section.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/src/lib/components/Browse/Community.svelte b/src/lib/components/MainDrawer/Community.svelte
similarity index 100%
rename from src/lib/components/Browse/Community.svelte
rename to src/lib/components/MainDrawer/Community.svelte
diff --git a/src/lib/components/Browse/Messages.svelte b/src/lib/components/MainDrawer/Messages.svelte
similarity index 100%
rename from src/lib/components/Browse/Messages.svelte
rename to src/lib/components/MainDrawer/Messages.svelte
diff --git a/src/lib/components/Profile/Stats.svelte b/src/lib/components/Profile/Stats.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1e0e40c8..c4a4999d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -30,6 +30,8 @@
 	import IconSocialGitHub from '$lib/assets/icons/social/IconSocialGitHub.svelte'
 	import IconDrawerAdmin from '$lib/assets/icons/drawer/IconDrawerAdmin.svelte'
 	import LoginPrompt from '$lib/components/MainDrawer/LoginPrompt.svelte'
+	import Community from '$lib/components/MainDrawer/Community.svelte'
+	import Messages from '$lib/components/MainDrawer/Messages.svelte'
 	NProgress.configure({
 		minimum: 0.75,
 		showSpinner: false,
@@ -66,7 +68,6 @@
 		rel="stylesheet" />
 </svelte:head>
 
-<!-- {#if $isAuthenticated} -->
 <div class="drawer drawer-mobile">
 	<input id="my-drawer-2" bind:this={nav_drawer} type="checkbox" class="drawer-toggle" />
 	<div class="drawer-content bg-base-200">
@@ -79,6 +80,8 @@
 	<div class="drawer-side">
 		<label for="my-drawer-2" class="drawer-overlay" />
 		<div class="menu p-4 w-80 bg-base-100 text-base-content flex flex-col">
+			<!-- <Community /> -->
+			<!-- <Messages /> -->
 			<ul>
 				<div class="navbar">
 					<a href="/browse" class="btn btn-ghost normal-case text-xl">Mage</a>
@@ -123,14 +126,13 @@
 							Admin
 						</a>
 					</li>
-				{:else}
-					<li>
-						<a href="/browse">
-							<IconDrawerHome />
-							Browse
-						</a>
-					</li>
 				{/if}
+				<li>
+					<a href="/browse">
+						<IconDrawerHome />
+						Browse
+					</a>
+				</li>
 				<li>
 					<a href="">
 						<IconDrawerCommunity />
@@ -244,5 +246,3 @@
 		</div>
 	</div>
 </div>
-
-<!-- {/if} -->
diff --git a/src/routes/browse/+page.svelte b/src/routes/browse/+page.svelte
index 452e6024..1a5a759a 100644
--- a/src/routes/browse/+page.svelte
+++ b/src/routes/browse/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import Carousel from '$lib/components/Browse/Carousel.svelte'
-	import ChannelList from '$lib/components/Browse/ChannelList.svelte'
+	import ChannelList from '$lib/components/Browse/ChannelTable.svelte'
 </script>
 
 <Carousel />
diff --git a/src/routes/browse/[sectionId]/+page.server.ts b/src/routes/browse/[sectionId]/+page.server.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/routes/browse/[sectionId]/+page.svelte b/src/routes/browse/[sectionId]/+page.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/src/routes/profile/[customUsername]/+page.svelte b/src/routes/profile/[customUsername]/+page.svelte
index ab1fe527..7e8ff31e 100644
--- a/src/routes/profile/[customUsername]/+page.svelte
+++ b/src/routes/profile/[customUsername]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import IconLink from '$lib/assets/icons/IconLink.svelte'
 	import IconMore from '$lib/assets/icons/IconMore.svelte'
-	import ChannelList from '$lib/components/Browse/ChannelList.svelte'
+	import ChannelList from '$lib/components/Browse/ChannelTable.svelte'
 	import FollowList from '$lib/components/Profile/FollowList.svelte'
 
 	let tabs = ['Stats', 'Channels', 'Follows']

From b1f7eb06bf41b2971da639f2c4ac5ca602ea18af Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Tue, 17 Jan 2023 22:31:45 -0600
Subject: [PATCH 14/19] Chore: refactored some channel features

---
 src/lib/assets/styles/tailwind-output.css     | 128 +-----------------
 src/lib/stores/channelStore.ts                |  45 ++----
 src/routes/browse/+page.server.ts             |  17 +--
 src/routes/browse/+page.svelte                |   2 +
 .../search/[searchQuery]/+page.server.ts      |   0
 src/routes/search/[searchQuery]/+page.svelte  |   0
 tests/search.spec.ts                          |   6 +
 7 files changed, 33 insertions(+), 165 deletions(-)
 create mode 100644 src/routes/search/[searchQuery]/+page.server.ts
 create mode 100644 src/routes/search/[searchQuery]/+page.svelte
 create mode 100644 tests/search.spec.ts

diff --git a/src/lib/assets/styles/tailwind-output.css b/src/lib/assets/styles/tailwind-output.css
index d2ae440c..3b00e3aa 100644
--- a/src/lib/assets/styles/tailwind-output.css
+++ b/src/lib/assets/styles/tailwind-output.css
@@ -1848,41 +1848,6 @@ html {
 .btn-secondary:focus-visible {
   outline: 2px solid hsl(var(--s));
 }
-.btn-accent:hover,
-    .btn-accent.btn-active {
-  --tw-border-opacity: 1;
-  border-color: hsl(var(--af, var(--a)) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity));
-}
-.btn-info:hover,
-    .btn-info.btn-active {
-  --tw-border-opacity: 1;
-  border-color: hsl(var(--in) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--in) / var(--tw-bg-opacity));
-}
-.btn-success:hover,
-    .btn-success.btn-active {
-  --tw-border-opacity: 1;
-  border-color: hsl(var(--su) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--su) / var(--tw-bg-opacity));
-}
-.btn-warning:hover,
-    .btn-warning.btn-active {
-  --tw-border-opacity: 1;
-  border-color: hsl(var(--wa) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
-}
-.btn-error:hover,
-    .btn-error.btn-active {
-  --tw-border-opacity: 1;
-  border-color: hsl(var(--er) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--er) / var(--tw-bg-opacity));
-}
 .btn.glass:hover,
     .btn.glass.btn-active {
   --glass-opacity: 25%;
@@ -1906,12 +1871,6 @@ html {
 .btn-ghost:focus-visible {
   outline: 2px solid currentColor;
 }
-.btn-link:hover,
-    .btn-link.btn-active {
-  border-color: transparent;
-  background-color: transparent;
-  text-decoration-line: underline;
-}
 .btn-outline {
   border-color: currentColor;
   background-color: transparent;
@@ -2798,28 +2757,6 @@ html {
 .rounded-box {
   border-radius: var(--rounded-box, 1rem);
 }
-.glass,
-  .glass:hover,
-  .glass.btn-active {
-  border: none;
-  -webkit-backdrop-filter: blur(var(--glass-blur, 40px));
-          backdrop-filter: blur(var(--glass-blur, 40px));
-  background-color: transparent;
-  background-image: linear-gradient(
-        135deg,
-        rgb(255 255 255 / var(--glass-opacity, 30%)) 0%,
-        rgb(0 0 0 / 0%) 100%
-      ),
-      linear-gradient(
-        var(--glass-reflex-degree, 100deg),
-        rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%,
-        rgb(0 0 0 / 0%) 25%
-      );
-  box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%))
-        inset,
-      0 0 0 2px rgb(0 0 0 / 5%);
-  text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%));
-}
 .badge-sm {
   height: 1rem;
   font-size: 0.75rem;
@@ -3167,12 +3104,12 @@ html {
   width: -moz-fit-content;
   width: fit-content;
 }
-.w-96 {
-  width: 24rem;
-}
 .w-72 {
   width: 18rem;
 }
+.w-96 {
+  width: 24rem;
+}
 .w-10 {
   width: 2.5rem;
 }
@@ -3211,46 +3148,9 @@ html {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-@keyframes bounce {
-
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8,0,1,1);
-  }
-
-  50% {
-    transform: none;
-    animation-timing-function: cubic-bezier(0,0,0.2,1);
-  }
-}
-.animate-bounce {
-  animation: bounce 1s infinite;
-}
-@keyframes pulse {
-
-  50% {
-    opacity: .5;
-  }
-}
-.animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-@keyframes ping {
-
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-.animate-ping {
-  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-}
 .cursor-pointer {
   cursor: pointer;
 }
-.resize-none {
-  resize: none;
-}
 .grid-flow-col {
   grid-auto-flow: column;
 }
@@ -3266,9 +3166,6 @@ html {
 .items-center {
   align-items: center;
 }
-.justify-start {
-  justify-content: flex-start;
-}
 .justify-end {
   justify-content: flex-end;
 }
@@ -3325,9 +3222,6 @@ html {
 .rounded-md {
   border-radius: 0.375rem;
 }
-.rounded {
-  border-radius: 0.25rem;
-}
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -3492,9 +3386,6 @@ html {
 .pb-5 {
   padding-bottom: 1.25rem;
 }
-.pl-3 {
-  padding-left: 0.75rem;
-}
 .pl-5 {
   padding-left: 1.25rem;
 }
@@ -3647,10 +3538,6 @@ html {
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
 .ring {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3732,15 +3619,6 @@ html {
   border-radius: 0.25rem;
 }
 
-.focus\:border:focus {
-  border-width: 1px;
-}
-
-.focus\:border-indigo-700:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(67 56 202 / var(--tw-border-opacity));
-}
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
diff --git a/src/lib/stores/channelStore.ts b/src/lib/stores/channelStore.ts
index 82786427..388ef5c4 100644
--- a/src/lib/stores/channelStore.ts
+++ b/src/lib/stores/channelStore.ts
@@ -1,14 +1,15 @@
 import { writable, type Writable } from "svelte/store"
 import { env } from '$env/dynamic/public'
+import { currentUser } from '$lib/stores/authStore'
 
 let skip = 0
 let limit = 100
-let filterTechList: any[] = []
-const techList = []
 
 export const searchQuery: Writable<string> = writable('')
-export const channels: Writable<[]> = writable([])
 export const currentChannel: Writable<any> = writable(null)
+export const myChannels: Writable<[]> = writable([])
+export const channels: Writable<[]> = writable([])
+export const searchedchannels: Writable<[]> = writable([])
 
 async function createChannel({ title, description, thumbnail, category, tags, isPrivate = false, user, channelType }
     : { title: string, description: string, thumbnail: string, category: string[], tags: string[], isPrivate: boolean, user: any, channelType: string }
@@ -146,25 +147,13 @@ function resetSkipLimit() {
     limit = 100
 }
 
-async function getInitialChannels() {
-    currentChannel.set(null)
-    searchQuery.set('')
-    filterTechList = []
-    const user = null
-    //TODO: get this.authStore.currentUser
-    if (user) {
-        channels.set(await getMyChannels())
-    } else {
-        channels.set([])
-    }
-    await getChannels({ isRefresh: true })
-    return channels
-}
-
 async function getMyChannels() {
     return await fetch(`${env.PUBLIC_API_URL}/channels/me/hosted`, {
         method: 'GET'
-    }).then(response => response.json())
+    }).then(async response => {
+        const res = await response.json()
+        myChannels.set(res)
+    })
 }
 
 async function getChannelsByUserId({ userId, searchQuery = '', skip = 0, limit = 50 }: { userId: string, searchQuery: string, skip?: number, limit?: number }) {
@@ -178,14 +167,17 @@ async function getChannels({ isRefresh = false }: { isRefresh?: boolean } = {})
         resetSkipLimit()
     }
 
-    return await fetch(`${env.PUBLIC_API_URL}/channels?searchQuery=${searchQuery}&category=${filterTechList.map((item: any) => item.item_text).join()}&skip=${skip}&limit=${limit}`, {
+    return await fetch(`${env.PUBLIC_API_URL}/channels?searchQuery=${searchQuery}&skip=${skip}&limit=${limit}`, {
         method: 'GET'
     }).then(async response => {
+        console.log("response", response)
+
         const res = await response.json()
         if (res.length) {
             skip += limit
+            console.log("res", res)
             //TODO: push res to channels
-            // this.channels.push(...res)
+            // channels.update(current => [...current, res])
         } else {
             //TODO: show alert
             // if ((this.searchQuery || this.filterTechList.length) && !this.skip)
@@ -197,15 +189,6 @@ async function getChannels({ isRefresh = false }: { isRefresh?: boolean } = {})
     })
 }
 
-async function searchChannels() {
-    channels.set([])
-    if (!searchQuery && !filterTechList.length) {
-        return getInitialChannels()
-    } else {
-        return getChannels({ isRefresh: true })
-    }
-}
-
 async function leaveChannel({ userId, deleteOrLeaveOnExit = false }: { userId: string, deleteOrLeaveOnExit?: boolean }) {
     //TODO: fix writeable subscribe
     currentChannel.subscribe(async value => {
@@ -319,11 +302,9 @@ export {
     addChannelNotificationSubscriber,
     removeChannelNotificationSubscriber,
     deleteMembers,
-    getInitialChannels,
     getMyChannels,
     getChannelsByUserId,
     getChannels,
-    searchChannels,
     leaveChannel,
     enterChannel,
     toggleNotifications
diff --git a/src/routes/browse/+page.server.ts b/src/routes/browse/+page.server.ts
index 22dd40eb..086fd1d4 100644
--- a/src/routes/browse/+page.server.ts
+++ b/src/routes/browse/+page.server.ts
@@ -1,12 +1,13 @@
 import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
- 
+import { getMyChannels, getChannels } from '$lib/stores/channelStore'
+
 export const load = (async ({ params }) => {
-  // const post = null
- 
-  // if (post) {
-  //   return post
-  // }
- 
-  // throw error(404, 'Not found')
+    // const post = await getChannels()
+
+    // if (post) {
+    //     return post
+    // }
+
+    // throw error(404, 'Not found')
 }) satisfies PageServerLoad
\ No newline at end of file
diff --git a/src/routes/browse/+page.svelte b/src/routes/browse/+page.svelte
index 1a5a759a..8fec81da 100644
--- a/src/routes/browse/+page.svelte
+++ b/src/routes/browse/+page.svelte
@@ -1,7 +1,9 @@
 <script>
 	import Carousel from '$lib/components/Browse/Carousel.svelte'
+	import ChannelSearch from '$lib/components/Browse/ChannelSearch.svelte'
 	import ChannelList from '$lib/components/Browse/ChannelTable.svelte'
 </script>
 
 <Carousel />
+<ChannelSearch />
 <ChannelList />
diff --git a/src/routes/search/[searchQuery]/+page.server.ts b/src/routes/search/[searchQuery]/+page.server.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/routes/search/[searchQuery]/+page.svelte b/src/routes/search/[searchQuery]/+page.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/tests/search.spec.ts b/tests/search.spec.ts
new file mode 100644
index 00000000..1206f9e8
--- /dev/null
+++ b/tests/search.spec.ts
@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test'
+
+test('search page had expected to load', async ({ page }) => {
+    await page.goto('/search/test')
+    await expect(page).toHaveURL(/.*search/)
+})
\ No newline at end of file

From f47f42a67167336ab11066272cefa19f130cb19e Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Tue, 17 Jan 2023 22:44:51 -0600
Subject: [PATCH 15/19] Fix: test failures

---
 src/routes/browse/[sectionId]/+page.server.ts   | 12 ++++++++++++
 src/routes/search/[searchQuery]/+page.server.ts | 12 ++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/routes/browse/[sectionId]/+page.server.ts b/src/routes/browse/[sectionId]/+page.server.ts
index e69de29b..3dbf1408 100644
--- a/src/routes/browse/[sectionId]/+page.server.ts
+++ b/src/routes/browse/[sectionId]/+page.server.ts
@@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
+
+export const load = (async ({ params }) => {
+    // const post = await getChannels()
+
+    // if (post) {
+    //     return post
+    // }
+
+    // throw error(404, 'Not found')
+}) satisfies PageServerLoad
\ No newline at end of file
diff --git a/src/routes/search/[searchQuery]/+page.server.ts b/src/routes/search/[searchQuery]/+page.server.ts
index e69de29b..3dbf1408 100644
--- a/src/routes/search/[searchQuery]/+page.server.ts
+++ b/src/routes/search/[searchQuery]/+page.server.ts
@@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
+
+export const load = (async ({ params }) => {
+    // const post = await getChannels()
+
+    // if (post) {
+    //     return post
+    // }
+
+    // throw error(404, 'Not found')
+}) satisfies PageServerLoad
\ No newline at end of file

From b3fc6a16d9ed892b56fc939e0eb49865a956b427 Mon Sep 17 00:00:00 2001
From: Saiful <msisaifulsaif@gmail.com>
Date: Wed, 18 Jan 2023 11:40:24 +0600
Subject: [PATCH 16/19] fix the browse url

---
 src/hooks.server.ts        | 72 +++++++++++++++++---------------------
 src/routes/+layout.svelte  | 13 ++++---
 src/routes/+page.server.ts |  6 ++--
 3 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 19900a18..19e3ec8a 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -2,42 +2,41 @@ import { getUserDetails } from '$lib/stores/authStore'
 import type { Handle } from '@sveltejs/kit'
 
 export const handle: Handle = async ({ event, resolve }) => {
-    const userId = event.url.searchParams.get('userId') || event.cookies.get('userId')
-    let token = event.url.searchParams.get('token') || event.cookies.get('token') || ''
-    let user
-
-    if (event.locals && event.locals.user) {
-        user = event.locals.user.user
-    }
-
-    if (!token || !userId) {
-        return await resolve(event)
-    }
-
-    if (token && userId) {
-        if (!user) {
-            const response = await getUserDetails(token, userId)
-            if (response) {
-                if (response.freshJwt) {
-                    token = response.freshJwt
-                }
-                user = response.user
-            }
-        }
-
-        event.cookies.set('token', token)
-        event.cookies.set('userId', userId)
-        event.locals.user = {
-            userId,
-            token,
-            user
-        }
-    }
-
-    return await resolve(event)
+	const userId = event.url.searchParams.get('userId') || event.cookies.get('userId') || ''
+	let token = event.url.searchParams.get('token') || event.cookies.get('token') || ''
+	let user
+
+	if (event.locals && event.locals.user) {
+		user = event.locals.user.user
+	}
+
+	if (!token || !userId) {
+		return await resolve(event)
+	}
+
+	if (token && userId) {
+		if (!user) {
+			const response = await getUserDetails(token, userId)
+			if (response) {
+				if (response.freshJwt) {
+					token = response.freshJwt
+				}
+				user = response.user
+			}
+		}
+
+		event.cookies.set('token', token)
+		event.cookies.set('userId', userId)
+		event.locals.user = {
+			userId,
+			token,
+			user
+		}
+	}
+
+	return await resolve(event)
 }
 
-
 // const isAdminPage = /^\/admin\/(.*)/.test(route.id)
 // const isProfilePage = /^\/profile\/(.*)/.test(route.id)
 // const isPremiumPage = /^\/premium\/(.*)/.test(route.id)
@@ -60,11 +59,6 @@ export const handle: Handle = async ({ event, resolve }) => {
 //     }
 // }
 
-
-
-
-
-
 // import { remoteConfigStore } from '$lib/stores/remoteConfigStore'
 // import type { Handle, HandleServerError, RequestEvent } from '@sveltejs/kit'
 // import type { MaybePromise } from '@sveltejs/kit/types/private'
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1e0e40c8..678cd290 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -123,14 +123,13 @@
 							Admin
 						</a>
 					</li>
-				{:else}
-					<li>
-						<a href="/browse">
-							<IconDrawerHome />
-							Browse
-						</a>
-					</li>
 				{/if}
+				<li>
+					<a href="/browse">
+						<IconDrawerHome />
+						Browse
+					</a>
+				</li>
 				<li>
 					<a href="">
 						<IconDrawerCommunity />
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 0e3f1ef2..e4a0a7eb 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -2,7 +2,7 @@ import { redirect } from '@sveltejs/kit'
 
 /** @type {import('./$types').LayoutServerLoad} */
 export function load({ locals }: { locals: any }) {
-    if (!locals.user) {
-        throw redirect(307, '/browse')
-    }
+	if (!locals.user || locals.user) {
+		throw redirect(307, '/browse')
+	}
 }

From 72becd7c424faabaec0bcc5890b7488924ea3870 Mon Sep 17 00:00:00 2001
From: Saiful <msisaifulsaif@gmail.com>
Date: Thu, 19 Jan 2023 00:24:31 +0600
Subject: [PATCH 17/19] fixed the response object

---
 src/hooks.server.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 19e3ec8a..1fb6d71e 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -21,7 +21,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 				if (response.freshJwt) {
 					token = response.freshJwt
 				}
-				user = response.user
+				user = response
 			}
 		}
 

From ab0268b40ea80731abfd4d794dcfe4aac00c64d0 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Wed, 18 Jan 2023 13:31:24 -0600
Subject: [PATCH 18/19] Chore: renamed customUsername to username

---
 src/hooks.server.ts           | 66 +++++++++++++++++------------------
 src/lib/stores/chatStore.ts   |  2 +-
 src/lib/stores/streamStore.ts | 14 ++++----
 src/lib/stores/userStore.ts   | 14 ++++----
 4 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 19e3ec8a..6c34fa09 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -2,39 +2,39 @@ import { getUserDetails } from '$lib/stores/authStore'
 import type { Handle } from '@sveltejs/kit'
 
 export const handle: Handle = async ({ event, resolve }) => {
-	const userId = event.url.searchParams.get('userId') || event.cookies.get('userId') || ''
-	let token = event.url.searchParams.get('token') || event.cookies.get('token') || ''
-	let user
-
-	if (event.locals && event.locals.user) {
-		user = event.locals.user.user
-	}
-
-	if (!token || !userId) {
-		return await resolve(event)
-	}
-
-	if (token && userId) {
-		if (!user) {
-			const response = await getUserDetails(token, userId)
-			if (response) {
-				if (response.freshJwt) {
-					token = response.freshJwt
-				}
-				user = response.user
-			}
-		}
-
-		event.cookies.set('token', token)
-		event.cookies.set('userId', userId)
-		event.locals.user = {
-			userId,
-			token,
-			user
-		}
-	}
-
-	return await resolve(event)
+    const userId = event.url.searchParams.get('userId') || event.cookies.get('userId') || ''
+    let token = event.url.searchParams.get('token') || event.cookies.get('token') || ''
+    let user
+
+    if (event.locals && event.locals.user) {
+        user = event.locals.user.user
+    }
+
+    if (!token || !userId) {
+        return await resolve(event)
+    }
+
+    if (token && userId) {
+        if (!user) {
+            const response = await getUserDetails(token, userId)
+            if (response) {
+                if (response.freshJwt) {
+                    token = response.freshJwt
+                }
+                user = response
+            }
+        }
+
+        event.cookies.set('token', token)
+        event.cookies.set('userId', userId)
+        event.locals.user = {
+            userId,
+            token,
+            user
+        }
+    }
+
+    return await resolve(event)
 }
 
 // const isAdminPage = /^\/admin\/(.*)/.test(route.id)
diff --git a/src/lib/stores/chatStore.ts b/src/lib/stores/chatStore.ts
index 8df20b85..fbd40322 100644
--- a/src/lib/stores/chatStore.ts
+++ b/src/lib/stores/chatStore.ts
@@ -123,7 +123,7 @@ async function sendChatMessage({ chat, attributes }: { chat: any, attributes: an
 //             if (user.isWebNotificationsEnabled) sendNotificationsTo.push(user._id)
 //             // if (user.isEmailNotificationsEnabled) sendEmailsTo.push(user._id)
 //         })
-//         const body = `${user.customUsername}: ${attributes.text}`
+//         const body = `${user.username}: ${attributes.text}`
 //         const title = `New message at ${channel.title}`
 //         const sendToList = []
 //         // if (sendNotificationsTo.length) {
diff --git a/src/lib/stores/streamStore.ts b/src/lib/stores/streamStore.ts
index 9d764904..83ebaed8 100644
--- a/src/lib/stores/streamStore.ts
+++ b/src/lib/stores/streamStore.ts
@@ -9,7 +9,7 @@ let hasActiveTracks = false
 const userData: {
     id: string
     avatar: any
-    customUsername: any
+    username: any
     displayName: string
     userType: string
     obsState: string
@@ -24,7 +24,7 @@ const userData: {
 } = {
     id: '',
     avatar: null,
-    customUsername: null,
+    username: null,
     displayName: '',
     userType: 'listener',
     obsState: 'restricted',
@@ -296,13 +296,13 @@ function disconnected() {
     // }
 }
 
-function getMember({ _id, avatar, customUsername, displayName, obsStream, screenStream, webcamStream, audioStream }
-    : { _id: string, avatar: string, customUsername: string, displayName: string, obsStream: string, screenStream: string, webcamStream: string, audioStream: string }) {
+function getMember({ _id, avatar, username, displayName, obsStream, screenStream, webcamStream, audioStream }
+    : { _id: string, avatar: string, username: string, displayName: string, obsStream: string, screenStream: string, webcamStream: string, audioStream: string }) {
     return {
         id: _id,
-        avatar: avatar,
-        customUsername: customUsername,
-        displayName: displayName,
+        avatar,
+        username,
+        displayName,
         userType: '',//TODO: fix subscribing to writeables _id == channelStore.currentChannel.user ? 'host' : 'listener',
         obsState: 'hibernate',
         screenState: 'hibernate',
diff --git a/src/lib/stores/userStore.ts b/src/lib/stores/userStore.ts
index 758e7c28..c3cee3eb 100644
--- a/src/lib/stores/userStore.ts
+++ b/src/lib/stores/userStore.ts
@@ -19,8 +19,8 @@ async function getUsersByName({ name }: { name: string }) {
     }).then(response => response.json())
 }
 
-async function getUserByCustomUsername({ customUsername }: { customUsername: string }) {
-    return await fetch(`${env.PUBLIC_API_URL}/users/search/custom-username?customUsername=${customUsername}`, {
+async function getUserByUsername({ username }: { username: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/users/search/username?username=${username}`, {
         method: 'GET'
     }).then(response => response.json())
 }
@@ -52,10 +52,10 @@ async function updateAvatar({ fileToUpload, fileName }: { fileToUpload: any, fil
     })
 }
 
-async function updateCustomUsername({ customUsername }: { customUsername: string }) {
-    return await fetch(`${env.PUBLIC_API_URL}/users/current/custom-username`, {
+async function updateUsername({ username }: { username: string }) {
+    return await fetch(`${env.PUBLIC_API_URL}/users/current/username`, {
         method: 'PATCH',
-        body: JSON.stringify({ customUsername })
+        body: JSON.stringify({ username })
     }).then(async response => {
         //TODO: update user in auth service
         const userUpdate = await response.json()
@@ -70,8 +70,8 @@ export {
     getUserById,
     getUsersByIds,
     getUsersByName,
-    getUserByCustomUsername,
+    getUserByUsername,
     updateUser,
     updateAvatar,
-    updateCustomUsername
+    updateUsername
 }
\ No newline at end of file

From 81c67d89d50bcd6ad0dee9ee74992e2e54ebb601 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Thu, 19 Jan 2023 02:29:37 -0600
Subject: [PATCH 19/19] Fix: testing codecov changes

---
 package.json                              |  2 +-
 src/lib/assets/styles/tailwind-output.css | 14 --------------
 2 files changed, 1 insertion(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 8f7b7721..3567f758 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",
diff --git a/src/lib/assets/styles/tailwind-output.css b/src/lib/assets/styles/tailwind-output.css
index 3b00e3aa..fbbe9f47 100644
--- a/src/lib/assets/styles/tailwind-output.css
+++ b/src/lib/assets/styles/tailwind-output.css
@@ -3618,52 +3618,42 @@ html {
 .scrollbar-thumb-rounded::-webkit-scrollbar-thumb {
   border-radius: 0.25rem;
 }
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-
 .focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 .focus\:ring-white:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
-
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
-
 .hover\:bg-blue-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
-
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
-
 .hover\:text-blue-700:hover {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
 }
-
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
-
 @media (prefers-color-scheme: dark) {
 
   .dark\:border-gray-700 {
@@ -3711,7 +3701,6 @@ html {
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 }
-
 @media (min-width: 640px) {
 
   .sm\:col-span-2 {
@@ -3730,7 +3719,6 @@ html {
     gap: 1.5rem;
   }
 }
-
 @media (min-width: 768px) {
 
   .md\:px-10 {
@@ -3738,7 +3726,6 @@ html {
     padding-right: 2.5rem;
   }
 }
-
 @media (min-width: 1024px) {
 
   .lg\:order-2 {
@@ -3810,7 +3797,6 @@ html {
     text-align: right;
   }
 }
-
 @media (min-width: 1280px) {
 
   .xl\:mb-0 {