Merge pull request #1247 from CodeCrowCorp/dev

Fix: profile user issue and duplicate history code
CodeCrowCorp · May 15, 2024 · 89f0e13 · 89f0e13
2 parents 9112194 + e5b51dd
commit 89f0e13
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 131 deletions.
diff --git a/src/lib/components/Channel/Chat/DrawerChat.svelte b/src/lib/components/Channel/Chat/DrawerChat.svelte
@@ -4,8 +4,8 @@
 	import { channel_connection, channel_message } from '$lib/stores/websocketStore'
 	import DropdownViewChannel from '$lib/components/Channel/Chat/DropdownViewChannel.svelte'
 	import { page } from '$app/stores'
-	import { onDestroy, onMount } from 'svelte'
-	import { is_chat_drawer_open, was_chat_drawer_closed } from '$lib/stores/channelStore'
+	import { onDestroy } from 'svelte'
+	import { is_chat_drawer_open } from '$lib/stores/channelStore'
 	import { emitChatHistoryToChannel } from '$lib/websocket'
 	import { setRole } from '$lib/utils'
 	import LastItemInViewport from '$lib/actions/LastItemInViewport'
@@ -50,21 +50,6 @@
 		}
 	})
 
-	onMount(() => {
-		if (
-			$was_chat_drawer_closed &&
-			!chatHistory?.length &&
-			$channel_connection === `open-${channel._id}` &&
-			channel.socket?.readyState === WebSocket.OPEN
-		) {
-			emitChatHistoryToChannel({
-				channelSocket: channel.socket,
-				channelId: channel._id,
-				limit: 100
-			})
-		}
-	})
-
 	onDestroy(() => {
 		$is_chat_drawer_open = false
 	})

diff --git a/src/lib/websocket.ts b/src/lib/websocket.ts
@@ -1,6 +1,6 @@
 import { env } from '$env/dynamic/public'
 
-const initChannelSocket = ({ channelId }: { channelId: string }) => {
+const initChannelSocket = ({ channelId }: { channelId: number }) => {
 	return new WebSocket(`${env.PUBLIC_WEBSOCKET_URL}/wsinit/channelid/${channelId}/connect`)
 }
 
@@ -30,9 +30,9 @@ const emitChannelSubscribeByUser = ({
 	username
 }: {
 	channelSocket: WebSocket
-	channelId: string
-	hostId: string
-	userId: string
+	channelId: number
+	hostId: number
+	userId: number
 	username: string
 }) => {
 	channelSocket.send(
@@ -51,7 +51,7 @@ const emitMessageToChannel = ({
 	message
 }: {
 	channelSocket: WebSocket
-	channelId: string
+	channelId: number
 	message: any
 }) => {
 	channelSocket.send(JSON.stringify({ eventName: `channel-message`, channelId, message }))
@@ -63,7 +63,7 @@ const emitDeleteMessageToChannel = ({
 	message
 }: {
 	channelSocket: WebSocket
-	channelId: string
+	channelId: number
 	message: string
 }) => {
 	channelSocket.send(
@@ -80,7 +80,7 @@ const emitDeleteAllMessagesToChannel = ({
 	channelId
 }: {
 	channelSocket: WebSocket
-	channelId: string
+	channelId: number
 }) => {
 	channelSocket.send(JSON.stringify({ eventName: `delete-all-channel-messages`, channelId }))
 }
@@ -92,28 +92,18 @@ const emitChatHistoryToChannel = ({
 	cursor
 }: {
 	channelSocket: WebSocket
-	channelId: string
+	channelId: number
 	limit: number
 	cursor?: string
 }) => {
-	if (!cursor) {
-		channelSocket.send(
-			JSON.stringify({
-				eventName: `channel-message-history`,
-				channelId,
-				limit
-			})
-		)
-	} else {
-		channelSocket.send(
-			JSON.stringify({
-				eventName: `channel-message-history`,
-				channelId,
-				limit,
-				cursor
-			})
-		)
-	}
+	channelSocket.send(
+		JSON.stringify({
+			eventName: `channel-message-history`,
+			channelId,
+			limit,
+			cursor
+		})
+	)
 }
 
 const emitReactToMessage = ({
@@ -124,7 +114,7 @@ const emitReactToMessage = ({
 	reaction
 }: {
 	channelSocket: WebSocket
-	channelId: string
+	channelId: number
 	message: any
 	user: any
 	reaction: string

diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
@@ -29,7 +29,7 @@
 					viewId: data.profile._id
 				},
 				{
-					userId: $page.data.user.userId,
+					userId: $page.data.user?.userId,
 					token: $page.data.user.token
 				}
 			)

diff --git a/src/routes/channel/[channelId]/+page.svelte b/src/routes/channel/[channelId]/+page.svelte
@@ -140,8 +140,16 @@
 		clearInterval(platformPollingInterval)
 		platformPollingInterval = null
 		disableSharing()
+		$channel_connection = `closed`
+		$channel_message = ''
 		channels.forEach((ch: any) => {
-			if (ch.socket && ch.socket.constructor === WebSocket) ch.socket.close()
+			if (ch.socket && ch.socket.constructor === WebSocket) {
+				ch.socket.removeEventListener('open', openHandler)
+				ch.socket.removeEventListener('message', messageHandler)
+				ch.socket.removeEventListener('error', errorHandler)
+				ch.socket.removeEventListener('close', closeHandler)
+				ch.socket.close()
+			}
 		})
 		channels = []
 	})
@@ -173,14 +181,14 @@
 		if (chan.socket?.readyState === WebSocket.OPEN) {
 			emitChannelSubscribeByUser({
 				channelSocket: chan.socket,
-				channelId: $page.params.channelId,
+				channelId: parseInt($page.params.channelId),
 				hostId: chan.userId,
 				userId: $page.data.user?.userId,
 				username: $page.data.user?.user?.username
 			})
 			emitChatHistoryToChannel({
 				channelSocket: chan.socket,
-				channelId: $page.params.channelId,
+				channelId: parseInt($page.params.channelId),
 				limit: 100
 			})
 			platformPollingInterval = setInterval(async () => {
@@ -219,55 +227,67 @@
 		}
 	}
 
+	let openHandler = (data: any) => {
+		initChannel(channel)
+	}
+
+	let messageHandler = (data: any) => {
+		if (data.error) {
+			console.error({ Error: data.error })
+		}
+		console.log('channel listening to messages')
+		if (isJsonString(data.data)) {
+			$channel_message = data.data
+		}
+	}
+
+	let errorHandler = (data: any) => {
+		console.log('channel socket connection error')
+		console.log(data)
+		clearInterval(platformPollingInterval)
+		platformPollingInterval = null
+		attemptReconnect()
+	}
+
+	let closeHandler = (data: any) => {
+		console.log('channel socket connection close')
+		console.log(data)
+		//if manually closed, don't reconnect
+		if (data.code === 1005) {
+			clearInterval(platformPollingInterval)
+			platformPollingInterval = null
+			return
+		}
+		attemptReconnect()
+	}
+
 	const handleWebsocket = async () => {
 		try {
+			if (!$page.url.pathname.includes('/channel')) return
 			channel = channels.find((ch: any) => ch._id === parseInt($page.params.channelId))
 			await insertChannelView(channel)
 			chatHistory = []
 			isHostOrGuest =
 				channel.userId === $page.data.user?.userId ||
 				channel.guests?.includes($page.data.user?.userId)
 			if (!channel.socket) {
-				channel.socket = initChannelSocket({ channelId: $page.params.channelId })
+				channel.socket = initChannelSocket({ channelId: parseInt($page.params.channelId) })
 			} else {
 				initChannel(channel)
 			}
 			if (channel.socket && channel.socket.constructor === WebSocket) {
-				channel.socket.addEventListener('open', async (data: any) => {
-					initChannel(channel)
-				})
-				channel.socket.addEventListener('message', (data: any) => {
-					console.log('channel listening to messages')
-					if (isJsonString(data.data)) {
-						$channel_message = data.data
-					}
-				})
-				channel.socket.addEventListener('error', (data: any) => {
-					console.log('channel socket connection error')
-					console.log(data)
-					clearInterval(platformPollingInterval)
-					platformPollingInterval = null
-					attemptReconnect()
-				})
-				channel.socket.addEventListener('close', (data: any) => {
-					console.log('channel socket connection close')
-					console.log(data)
-
-					//if manually closed, don't reconnect
-					if (data.code === 1005) {
-						clearInterval(platformPollingInterval)
-						platformPollingInterval = null
-						return
-					}
-					attemptReconnect()
-				})
+				channel.socket.addEventListener('open', openHandler)
+				channel.socket.addEventListener('message', messageHandler)
+				channel.socket.addEventListener('error', errorHandler)
+				channel.socket.addEventListener('close', closeHandler)
 			}
 		} catch (err) {
-			if (err) attemptReconnect()
+			attemptReconnect()
 		}
 	}
 
 	const attemptReconnect = () => {
+		if (!$page.url.pathname.includes('/channel')) return
 		setTimeout(async () => {
 			channel = channels.find((ch: any) => ch._id === parseInt($page.params.channelId))
 			if (channel) {
@@ -304,7 +324,7 @@
 		})
 		emitDeleteAllMessagesToChannel({
 			channelSocket: channel.socket,
-			channelId: $page.params.channelId
+			channelId: parseInt($page.params.channelId)
 		})
 		goto('/browse')
 	}
@@ -364,65 +384,68 @@
 	}
 </script>
 
-{#if !$is_sharing_screen && !$is_sharing_webcam && !$is_sharing_audio && isHostOrGuest}
-	<DrawerRestream />
-{/if}
+{#key $page.url.pathname}
+	{#if !$is_sharing_screen && !$is_sharing_webcam && !$is_sharing_audio && isHostOrGuest}
+		<DrawerRestream />
+	{/if}
 
-{#if channel && channel._id === parseInt($page.params.channelId)}
-	<div class="relative h-full bg-base-200 overflow-hidden flex">
-		<div
-			class={'lg:ml-24 h-full transition-all delay-75 ' +
-				(!$is_chat_drawer_open ? 'w-full' : 'with-drawer')}>
-			<StreamContainer
-				bind:channel
-				bind:userCount
-				bind:channels
-				on:loadMore={loadMoreChannels}
-				bind:isHostOrGuest
-				bind:viewers />
+	{#if channel && channel._id === parseInt($page.params.channelId)}
+		<div class="relative h-full bg-base-200 overflow-hidden flex">
+			<div
+				class={'lg:ml-24 h-full transition-all delay-75 ' +
+					(!$is_chat_drawer_open ? 'w-full' : 'with-drawer')}>
+				<StreamContainer
+					bind:channel
+					bind:userCount
+					bind:channels
+					on:loadMore={loadMoreChannels}
+					bind:isHostOrGuest
+					bind:viewers />
 
-			{#if showEditChannelDrawer}
-				<DrawerEditChannel bind:channel bind:showDrawer={showEditChannelDrawer} />
-			{/if}
-		</div>
-		{#if !$is_chat_drawer_destroy}
-			<div class={'absolute right-0 top-0 ' + ($is_chat_drawer_open ? 'drawer-container' : 'w-0')}>
-				<div class="drawer drawer-end">
-					<input
-						id="chat-drawer"
-						type="checkbox"
-						class="drawer-toggle"
-						bind:checked={$is_chat_drawer_open} />
-					<div class="drawer-side w-fit lg:absolute lg:right-0 lg:pb-0 pb-4">
-						<label for="chat-drawer" class="drawer-overlay lg:hidden" />
-						<div
-							class="h-full pt-12 lg:p-5 md:w-fit lg:ml-0 md:ml-0 w-max-full mobile-margin lg:drop-shadow-lg">
-							<DrawerChat bind:channel bind:showEditChannelDrawer bind:viewers {chatHistory} />
+				{#if showEditChannelDrawer}
+					<DrawerEditChannel bind:channel bind:showDrawer={showEditChannelDrawer} />
+				{/if}
+			</div>
+			{#if !$is_chat_drawer_destroy}
+				<div
+					class={'absolute right-0 top-0 ' + ($is_chat_drawer_open ? 'drawer-container' : 'w-0')}>
+					<div class="drawer drawer-end">
+						<input
+							id="chat-drawer"
+							type="checkbox"
+							class="drawer-toggle"
+							bind:checked={$is_chat_drawer_open} />
+						<div class="drawer-side w-fit lg:absolute lg:right-0 lg:pb-0 pb-4">
+							<label for="chat-drawer" class="drawer-overlay lg:hidden" />
+							<div
+								class="h-full pt-12 lg:p-5 md:w-fit lg:ml-0 md:ml-0 w-max-full mobile-margin lg:drop-shadow-lg">
+								<DrawerChat bind:channel bind:showEditChannelDrawer bind:viewers {chatHistory} />
+							</div>
 						</div>
 					</div>
 				</div>
-			</div>
-		{/if}
-	</div>
+			{/if}
+		</div>
 
-	<input
-		type="checkbox"
-		id="modal-delete-channel"
-		class="modal-toggle"
-		bind:checked={isDeleteModalOpen} />
-	<Modal
-		id="modal-delete-channel"
-		title="Delete channel"
-		message="Are you sure you want to delete this channel?"
-		no="Cancel"
-		noAction={deleteChannelNoAction}
-		yes="Yes"
-		yesAction={deleteChannelYesAction}
-		isError={true} />
-	{#if $is_feature_premium_enabled}
-		<DialogSponsor profile={{ _id: channel.userId, username: channel.username }} />
+		<input
+			type="checkbox"
+			id="modal-delete-channel"
+			class="modal-toggle"
+			bind:checked={isDeleteModalOpen} />
+		<Modal
+			id="modal-delete-channel"
+			title="Delete channel"
+			message="Are you sure you want to delete this channel?"
+			no="Cancel"
+			noAction={deleteChannelNoAction}
+			yes="Yes"
+			yesAction={deleteChannelYesAction}
+			isError={true} />
+		{#if $is_feature_premium_enabled}
+			<DialogSponsor profile={{ _id: channel.userId, username: channel.username }} />
+		{/if}
 	{/if}
-{/if}
+{/key}
 
 <style>
 	.with-drawer {