From b28ca9bca2458f476114414ac430a5484d9f231b Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Wed, 13 Dec 2023 19:16:25 -0600
Subject: [PATCH 1/2] Fix: websocket reconnection and channel edit issues

---
 .../Channel/Chat/DrawerEditChannel.svelte     |   2 +-
 .../Channel/Stream/StreamContainer.svelte     |   8 +-
 .../Channel/Stream/StreamControls.svelte      | 203 ++++++++----------
 .../Channel/Stream/VideoItem.svelte           |  56 +++--
 src/lib/components/Global/DrawerMain.svelte   |   4 +-
 src/lib/stores/streamStore.ts                 |  18 +-
 src/lib/stores/userStore.ts                   |   2 +-
 src/lib/websocket.ts                          |   1 +
 src/routes/+layout.svelte                     |   6 +-
 .../channel/[channelId]/+page.server.ts       |   6 +-
 src/routes/channel/[channelId]/+page.svelte   |  38 ++--
 11 files changed, 148 insertions(+), 196 deletions(-)

diff --git a/src/lib/components/Channel/Chat/DrawerEditChannel.svelte b/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
index be68afb1..8366b0ee 100644
--- a/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
+++ b/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { tags } from '$lib/stores/channelStore'
-	import { is_sharing_screen, is_sharing_webcam } from '$lib/stores/streamStore'
+	import { is_sharing_webrtc, is_sharing_webcam } from '$lib/stores/streamStore'
 	import { onDestroy, onMount } from 'svelte'
 	import Tags from 'svelte-tags-input'
 	import DrawerAddCategory from '$lib/components/Browse/DrawerAddCategory.svelte'
diff --git a/src/lib/components/Channel/Stream/StreamContainer.svelte b/src/lib/components/Channel/Stream/StreamContainer.svelte
index 759150c8..522986aa 100644
--- a/src/lib/components/Channel/Stream/StreamContainer.svelte
+++ b/src/lib/components/Channel/Stream/StreamContainer.svelte
@@ -12,9 +12,9 @@
 	import { page } from '$app/stores'
 	import { createEventDispatcher } from 'svelte'
 	import {
-		is_sharing_obs,
+		is_sharing_rtmp,
 		is_sharing_audio,
-		is_sharing_screen,
+		is_sharing_webrtc,
 		is_sharing_webcam
 	} from '$lib/stores/streamStore'
 	import { getNumberInThousands } from '$lib/utils'
@@ -89,8 +89,8 @@
 <div class="flex justify-center h-full">
 	<div
 		class="carousel carousel-vertical rounded-lg bg-base-100 w-full m-5 mb-24 {isScrollable ||
-		$is_sharing_obs ||
-		$is_sharing_screen ||
+		$is_sharing_rtmp ||
+		$is_sharing_webrtc ||
 		$is_sharing_webcam ||
 		$is_sharing_audio
 			? 'overflow-y-hidden'
diff --git a/src/lib/components/Channel/Stream/StreamControls.svelte b/src/lib/components/Channel/Stream/StreamControls.svelte
index 8e2bffb2..efd059e8 100644
--- a/src/lib/components/Channel/Stream/StreamControls.svelte
+++ b/src/lib/components/Channel/Stream/StreamControls.svelte
@@ -5,19 +5,17 @@
 	import IconRestream from '$lib/assets/icons/channel/IconRestream.svelte'
 	import IconStreamKey from '$lib/assets/icons/channel/IconStreamKey.svelte'
 	import IconSources from '$lib/assets/icons/channel/IconSources.svelte'
-	import { del, get, post, put } from '$lib/api'
+	import { get, put } from '$lib/api'
 	import { page } from '$app/stores'
 	import { emitChannelUpdate } from '$lib/websocket'
 	import {
-		is_sharing_audio,
-		is_sharing_screen,
-		is_sharing_webcam,
-		is_sharing_obs,
+		is_sharing_webrtc,
+		is_sharing_rtmp,
 		updateVideoItems,
 		is_wip_webrtc
 	} from '$lib/stores/streamStore'
 	import { channel_connection } from '$lib/stores/websocketStore'
-	import { onDestroy, onMount } from 'svelte'
+	import { onMount } from 'svelte'
 	import IconAddGuest from '$lib/assets/icons/channel/IconAddGuest.svelte'
 	import { is_restream_drawer_open } from '$lib/stores/channelStore'
 	import IconRefresh from '$lib/assets/icons/IconRefresh.svelte'
@@ -34,7 +32,12 @@
 		rtmps: any = null,
 		copyTextUrl = 'Copy',
 		copyTextKey = 'Copy',
-		urlList: any = []
+		urlList: any = [],
+		isSharingScreen = false,
+		isSharingWebcam = false,
+		isSharingAudio = false
+
+	$: $is_sharing_webrtc = isSharingScreen || isSharingWebcam || isSharingAudio
 
 	$: isHost = channel?.user === $page.data.user?.userId
 
@@ -48,8 +51,6 @@
 		(video: any) => video._id === $page.data.user?.userId
 	)
 
-	let subcriptions: any[] = []
-
 	const createLiveInput = async (trackData: any) => {
 		return await put(`live-input`, trackData, {
 			userId: $page.data.user?.userId,
@@ -57,7 +58,7 @@
 		})
 	}
 
-	const deleteLiveInput = async ({
+	const getLiveInput = async ({
 		channelId,
 		userId,
 		trackType
@@ -66,90 +67,91 @@
 		userId: string
 		trackType: string
 	}) => {
-		if (channelId && userId && trackType) {
-			return await del(
-				`live-input?channelId=${channelId}&userId=${userId}&trackType=${trackType}`,
-				{
-					userId: $page.data.user?.userId,
-					token: $page.data.user?.token
-				}
-			)
-		}
+		return await get(`live-input?channelId=${channelId}&userId=${userId}&trackType=${trackType}`, {
+			userId: $page.data.user?.userId,
+			token: $page.data.user?.token
+		})
 	}
 
 	const startScreenStream = async () => {
-		const liveInput = await createLiveInput({
+		let liveInput = await getLiveInput({
 			channelId: `${$page.params.channelId}`,
 			userId: $page.data.user?.userId,
-			trackType: 'screen',
-			liveInput: {
-				meta: {
-					name: `${$page.params.channelId}-${$page.data.user.userId}-screen`
-				},
-				recording: { mode: 'off' }
-			}
+			trackType: 'webrtc'
 		})
+		if (!liveInput) {
+			liveInput = await createLiveInput({
+				channelId: `${$page.params.channelId}`,
+				userId: $page.data.user?.userId,
+				trackType: 'screen',
+				liveInput: {
+					meta: {
+						name: `${$page.params.channelId}-${$page.data.user.userId}-webrtc`
+					},
+					recording: { mode: 'off' }
+				}
+			})
+		}
 		channel.videoItems = updateVideoItems(channel.videoItems, [liveInput])
 	}
 
 	const stopScreenStream = async () => {
-		await deleteLiveInput({
-			channelId: $page.params.channelId,
-			userId: $page.data.user.userId,
-			trackType: 'screen'
-		})
 		channel.videoItems = updateVideoItems(channel.videoItems, [
 			{ _id: $page.data.user.userId, trackType: 'screen' }
 		])
 	}
 
 	const startWebcamStream = async () => {
-		const liveInput = await createLiveInput({
+		let liveInput = await getLiveInput({
 			channelId: `${$page.params.channelId}`,
 			userId: $page.data.user?.userId,
-			trackType: 'webcam',
-			liveInput: {
-				meta: {
-					name: `${$page.params.channelId}-${$page.data.user.userId}-webcam`
-				},
-				recording: { mode: 'off' }
-			}
+			trackType: 'webrtc'
 		})
+		if (!liveInput) {
+			liveInput = await createLiveInput({
+				channelId: `${$page.params.channelId}`,
+				userId: $page.data.user?.userId,
+				trackType: 'webrtc',
+				liveInput: {
+					meta: {
+						name: `${$page.params.channelId}-${$page.data.user.userId}-webrtc`
+					},
+					recording: { mode: 'off' }
+				}
+			})
+		}
 		channel.videoItems = updateVideoItems(channel.videoItems, [liveInput])
 	}
 
 	const stopWebcamStream = async () => {
-		await deleteLiveInput({
-			channelId: $page.params.channelId,
-			userId: $page.data.user.userId,
-			trackType: 'webcam'
-		})
 		channel.videoItems = updateVideoItems(channel.videoItems, [
 			{ _id: $page.data.user.userId, trackType: 'webcam' }
 		])
 	}
 
 	const startAudioStream = async () => {
-		const liveInput = await createLiveInput({
+		let liveInput = await getLiveInput({
 			channelId: `${$page.params.channelId}`,
 			userId: $page.data.user?.userId,
-			trackType: 'audio',
-			liveInput: {
-				meta: {
-					name: `${$page.params.channelId}-${$page.data.user.userId}-audio`
-				},
-				recording: { mode: 'off' }
-			}
+			trackType: 'webrtc'
 		})
+		if (!liveInput) {
+			liveInput = await createLiveInput({
+				channelId: `${$page.params.channelId}`,
+				userId: $page.data.user?.userId,
+				trackType: 'webrtc',
+				liveInput: {
+					meta: {
+						name: `${$page.params.channelId}-${$page.data.user.userId}-webrtc`
+					},
+					recording: { mode: 'off' }
+				}
+			})
+		}
 		channel.videoItems = updateVideoItems(channel.videoItems, [liveInput])
 	}
 
 	const stopAudioStream = async () => {
-		await deleteLiveInput({
-			channelId: $page.params.channelId,
-			userId: $page.data.user.userId,
-			trackType: 'audio'
-		})
 		channel.videoItems = updateVideoItems(channel.videoItems, [
 			{ _id: $page.data.user.userId, trackType: 'audio' }
 		])
@@ -157,37 +159,6 @@
 
 	onMount(() => {
 		isScrollable = isHostOrGuest
-		const sub1 = is_sharing_screen.subscribe((value) => {
-			if (value) {
-				startScreenStream()
-			} else if (value === false) {
-				stopScreenStream()
-			}
-		})
-
-		const sub2 = is_sharing_webcam.subscribe((value) => {
-			if (value) {
-				startWebcamStream()
-			} else if (value === false) {
-				stopWebcamStream()
-			}
-		})
-
-		const sub3 = is_sharing_audio.subscribe((value) => {
-			if (value) {
-				startAudioStream()
-			} else if (value === false) {
-				stopAudioStream()
-			}
-		})
-
-		subcriptions.push(sub1, sub2, sub3)
-	})
-
-	onDestroy(() => {
-		subcriptions.forEach((subs) => {
-			subs()
-		})
 	})
 
 	const toggleGuest = (userId: string) => {
@@ -220,10 +191,10 @@
 		rtmps = await createLiveInput({
 			channelId: `${$page.params.channelId}`,
 			userId: $page.data.user?.userId,
-			trackType: 'obs',
+			trackType: 'rtmp',
 			liveInput: {
 				meta: {
-					name: `${$page.params.channelId}-${$page.data.user.userId}-obs`
+					name: `${$page.params.channelId}-${$page.data.user.userId}-rtmp`
 				},
 				recording: { mode: 'automatic' }
 			}
@@ -232,13 +203,11 @@
 
 	const showStreamKeyModal = async () => {
 		obs_modal.showModal()
-		rtmps = await get(
-			`live-input?channelId=${$page.params.channelId}&userId=${$page.data.user?.userId}`,
-			{
-				userId: $page.data.user?.userId,
-				token: $page.data.user?.token
-			}
-		)
+		rtmps = await getLiveInput({
+			channelId: $page.params.channelId,
+			userId: $page.data.user?.userId,
+			trackType: 'rtmp'
+		})
 		if (!rtmps) {
 			await refreshStreamKey()
 		}
@@ -255,10 +224,8 @@
 	<div class="dropdown dropdown-top dropdown-end py-3">
 		<button
 			tabindex="0"
-			class="btn border-none tooltip tooltip-left font-normal normal-case {$is_sharing_screen ||
-			$is_sharing_webcam ||
-			$is_sharing_audio ||
-			$is_sharing_obs
+			class="btn border-none tooltip tooltip-left font-normal normal-case {$is_sharing_webrtc ||
+			$is_sharing_rtmp
 				? 'btn-primary'
 				: 'btn-neutral'}"
 			data-tip="Sources"
@@ -268,15 +235,15 @@
 		<ul tabindex="0" class="dropdown-content">
 			<div class="flex flex-row gap-4 card p-3 bg-base-300">
 				<button
-					class="btn border-none tooltip font-normal normal-case {$is_sharing_screen
+					class="btn border-none tooltip font-normal normal-case {isSharingScreen
 						? 'btn-primary'
 						: 'btn-neutral'}"
 					data-tip="Screen"
 					on:click={() => {
-						$is_sharing_screen = !$is_sharing_screen
+						isSharingScreen = !isSharingScreen
 					}}
 					disabled={$is_wip_webrtc ||
-						$is_sharing_obs ||
+						$is_sharing_rtmp ||
 						!isHostOrGuest ||
 						!isChannelSocketConnected ||
 						!videoItemIsActive}>
@@ -284,15 +251,15 @@
 				</button>
 
 				<button
-					class="btn border-none tooltip font-normal normal-case {$is_sharing_webcam
+					class="btn border-none tooltip font-normal normal-case {isSharingWebcam
 						? 'btn-primary'
 						: 'btn-neutral'}"
 					data-tip="Webcam"
 					on:click={() => {
-						$is_sharing_webcam = !$is_sharing_webcam
+						isSharingWebcam = !isSharingWebcam
 					}}
 					disabled={$is_wip_webrtc ||
-						$is_sharing_obs ||
+						$is_sharing_rtmp ||
 						!isHostOrGuest ||
 						!isChannelSocketConnected ||
 						!videoItemIsActive}>
@@ -300,15 +267,15 @@
 				</button>
 
 				<button
-					class="btn border-none tooltip font-normal normal-case {$is_sharing_audio
+					class="btn border-none tooltip font-normal normal-case {isSharingAudio
 						? 'btn-primary'
 						: 'btn-neutral'}"
 					data-tip="Audio"
 					on:click={() => {
-						$is_sharing_audio = !$is_sharing_audio
+						isSharingAudio = !isSharingAudio
 					}}
 					disabled={$is_wip_webrtc ||
-						$is_sharing_obs ||
+						$is_sharing_rtmp ||
 						!isHostOrGuest ||
 						!isChannelSocketConnected ||
 						!videoItemIsActive}>
@@ -321,9 +288,9 @@
 					class="btn border-none tooltip font-normal normal-case btn-neutral"
 					data-tip="Stream key"
 					on:click={() => showStreamKeyModal()}
-					disabled={$is_sharing_screen ||
-						$is_sharing_webcam ||
-						$is_sharing_audio ||
+					disabled={isSharingScreen ||
+						isSharingWebcam ||
+						isSharingAudio ||
 						!isHostOrGuest ||
 						!isChannelSocketConnected ||
 						!videoItemIsActive}>
@@ -342,10 +309,10 @@
 			on:click={() => {
 				$is_restream_drawer_open = !$is_restream_drawer_open
 			}}
-			disabled={$is_sharing_obs ||
-				$is_sharing_screen ||
-				$is_sharing_webcam ||
-				$is_sharing_audio ||
+			disabled={$is_sharing_rtmp ||
+				isSharingScreen ||
+				isSharingWebcam ||
+				isSharingAudio ||
 				!isHostOrGuest ||
 				!isChannelSocketConnected ||
 				!videoItemIsActive}>
diff --git a/src/lib/components/Channel/Stream/VideoItem.svelte b/src/lib/components/Channel/Stream/VideoItem.svelte
index 2424e8db..dc67496f 100644
--- a/src/lib/components/Channel/Stream/VideoItem.svelte
+++ b/src/lib/components/Channel/Stream/VideoItem.svelte
@@ -7,10 +7,10 @@
 	import IconChatGuest from '$lib/assets/icons/chat/IconChatGuest.svelte'
 	import { draggable } from '@neodrag/svelte'
 	import {
-		is_sharing_audio,
-		is_sharing_screen,
+		is_sharing_webrtc,
+		is_sharing_rtmp,
 		is_sharing_webcam,
-		is_sharing_obs
+		is_sharing_audio
 	} from '$lib/stores/streamStore'
 	import { emitChannelUpdate } from '$lib/websocket'
 	import { captureScreenShot, dataURLtoFile, formatTime, getColoredRole, setRole } from '$lib/utils'
@@ -18,14 +18,13 @@
 	import { addScreen, getScreen, removeScreen } from '$lib/stream-utils'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
 	import { get, putImage } from '$lib/api'
-	import LibLoader from '$lib/components/Global/LibLoader.svelte'
+	// import LibLoader from '$lib/components/Global/LibLoader.svelte'
 
 	export let video: any, channel: any
 
 	let role = '',
 		coloredRole: any = {},
 		isGuest = false,
-		obs_element: HTMLIFrameElement,
 		screen_element: HTMLVideoElement,
 		webcam_element: HTMLVideoElement,
 		audio_element: HTMLAudioElement,
@@ -46,8 +45,7 @@
 		timerInterval: any,
 		formattedTime: string = '00:00:00',
 		isHoverVideo: boolean = false,
-		iframeUrl: string = '',
-		streamPlayer: any
+		iframeUrl: string = ''
 
 	// WHIP/WHEP variables that determine if stream is coming in
 	$: isScreenLive = false
@@ -70,7 +68,7 @@
 		video._id !== $page.data.user?.userId &&
 		role !== '🤖 AI'
 
-	$: if (isMounted && video.obs !== prevObs) {
+	$: if (isMounted && video.rtmps !== prevObs) {
 		handleObsChanges()
 	}
 
@@ -95,9 +93,9 @@
 	$: animate = isWebcamFocused ? '' : 'transition-all'
 
 	const handleObsChanges = () => {
-		prevObs = video.obs
+		prevObs = video.rtmps
 		toggleClient({
-			trackType: 'obs'
+			trackType: 'rtmp'
 		})
 	}
 	const handleScreenChanges = () => {
@@ -122,17 +120,17 @@
 	const toggleClient = async ({ trackType }: { trackType: string }) => {
 		if ($page.data.user?.userId === video._id) {
 			switch (trackType) {
-				case 'obs':
-					if (video.obs) {
-						iframeUrl = video.obs.playback.iframe
-						$is_sharing_obs = true
+				case 'rtmp':
+					if (video.rtmps) {
+						iframeUrl = video.rtmps.playback.iframe
+						$is_sharing_rtmp = true
 					} else {
 						iframeUrl = ''
-						$is_sharing_obs = false
+						$is_sharing_rtmp = false
 					}
 					break
 				case 'screen':
-					if (video.screen && $is_sharing_screen) {
+					if (video.screen && $is_sharing_webrtc) {
 						const key = video.screen.webRTC.url + '-' + video._id
 						const existed = getScreen(key)
 						screenWhip =
@@ -141,12 +139,12 @@
 						if (existed) {
 							existed.videoElement = screen_element
 							screen_element.srcObject = existed.localStream
-							$is_sharing_screen = true
+							$is_sharing_webrtc = true
 							isScreenLive = true
 						}
 						addScreen(key, screenWhip)
 						screenWhip.addEventListener(`localStreamStopped-${trackType}`, async () => {
-							$is_sharing_screen = false
+							$is_sharing_webrtc = false
 							isScreenLive = false
 							removeScreen(key)
 						})
@@ -155,7 +153,7 @@
 						if (screen_element) {
 							screen_element.srcObject = null
 						}
-						$is_sharing_screen = false
+						$is_sharing_webrtc = false
 						isScreenLive = false
 					}
 					break
@@ -199,9 +197,9 @@
 			}
 		} else {
 			switch (trackType) {
-				case 'obs':
-					if (video.obs) {
-						iframeUrl = video.obs.playback.iframe
+				case 'rtmp':
+					if (video.rtmps) {
+						iframeUrl = video.rtmps.playback.iframe
 					} else {
 						iframeUrl = ''
 					}
@@ -305,7 +303,7 @@
 		isMounted = true
 	})
 
-	is_sharing_screen.subscribe(async (value: any) => {
+	is_sharing_webrtc.subscribe(async (value: any) => {
 		if (value === false) {
 			screenWhip?.disconnectStream()
 		}
@@ -382,7 +380,7 @@
 			timerInterval = setInterval(async () => {
 				try {
 					if (streamTime < 1) {
-						const inputId = video.obs?.uid || video.screen?.uid
+						const inputId = video.rtmps?.uid || video.screen?.uid
 						const streamRecord = await get(`analytics/stream?inputId=${inputId}`)
 						streamTime = Math.floor((Date.now() - streamRecord?.start) / 1000)
 					}
@@ -427,6 +425,11 @@
 	// 		console.log('err', err)
 	// 	}
 	// }
+	// <LibLoader
+	// 	src="https://embed.cloudflarestream.com/embed/sdk.latest.js"
+	// 	libraryDetectionObject="Stream"
+	// 	on:loaded={onLibLoaded}
+	// />
 </script>
 
 <div
@@ -452,14 +455,9 @@
 			{#if iframeUrl}
 				<div class="absolute rounded-md w-full h-full">
 					<iframe
-						bind:this={obs_element}
 						src={iframeUrl}
 						class="rounded-md w-full h-full"
 						allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;" />
-					<!-- <LibLoader
-						src="https://embed.cloudflarestream.com/embed/sdk.latest.js"
-						libraryDetectionObject="Stream"
-						on:loaded={onLibLoaded} /> -->
 				</div>
 			{/if}
 			{#if !iframeUrl}
diff --git a/src/lib/components/Global/DrawerMain.svelte b/src/lib/components/Global/DrawerMain.svelte
index cd69fd0b..b7c56f82 100644
--- a/src/lib/components/Global/DrawerMain.svelte
+++ b/src/lib/components/Global/DrawerMain.svelte
@@ -27,7 +27,7 @@
 	import { is_apps_modal_open, is_login_modal_open } from '$lib/stores/helperStore'
 	import { colorFromLevel, getNumberInThousands, levelAndBarValueFromExp } from '$lib/utils'
 	import { onMount } from 'svelte'
-	import { isOnline } from '$lib/stores/userStore'
+	import { is_online } from '$lib/stores/userStore'
 	import { get } from '$lib/api'
 	import IconMageLogo from '$lib/assets/icons/IconMageLogo.svelte'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
@@ -95,7 +95,7 @@
 					<div class={isChannelPage ? 'md:text-center' : ''}>
 						<div class={isChannelPage ? '' : 'my-1'}>
 							<div class="flex gap-3 {isChannelPage ? 'max-w-md' : 'max-w-full'}">
-								<div class="avatar {$isOnline ? 'online' : 'offline'}">
+								<div class="avatar {$is_online ? 'online' : 'offline'}">
 									<div
 										class="w-24 {isChannelPage ? 'md:w-12' : ''} mask {currentUser?.planDetails
 											?.planTier > 1
diff --git a/src/lib/stores/streamStore.ts b/src/lib/stores/streamStore.ts
index 711045c6..0b67e93a 100644
--- a/src/lib/stores/streamStore.ts
+++ b/src/lib/stores/streamStore.ts
@@ -2,8 +2,8 @@ import { writable, type Writable } from 'svelte/store'
 
 export const is_wip_webrtc: Writable<boolean | undefined> = writable(true)
 
-export const is_sharing_obs: Writable<boolean | undefined> = writable(undefined)
-export const is_sharing_screen: Writable<boolean | undefined> = writable(undefined)
+export const is_sharing_rtmp: Writable<boolean | undefined> = writable(undefined)
+export const is_sharing_webrtc: Writable<boolean | undefined> = writable(undefined)
 export const is_sharing_webcam: Writable<boolean | undefined> = writable(undefined)
 export const is_sharing_audio: Writable<boolean | undefined> = writable(undefined)
 
@@ -14,18 +14,12 @@ const updateVideoItems = (videoItems: any, liveInputs: any[]) => {
 			liveInputs.forEach((liveInput: any) => {
 				if (video._id === liveInput._id) {
 					switch (liveInput.trackType) {
-						case 'obs':
-							video.obs = liveInput.isConnected ? liveInput : null
+						case 'rtmp':
+							video.rtmps = liveInput.isConnected ? liveInput : null
 							break
-						case 'screen':
+						case 'webrtc':
 							// isConnected required for real-time dismissal
-							video.screen = liveInput.isConnected ? liveInput : null
-							break
-						case 'webcam':
-							video.webcam = liveInput.isConnected ? liveInput : null
-							break
-						case 'audio':
-							video.audio = liveInput.isConnected ? liveInput : null
+							video.webrtc = liveInput.isConnected ? liveInput : null
 							break
 					}
 				}
diff --git a/src/lib/stores/userStore.ts b/src/lib/stores/userStore.ts
index ce802ced..3c6c3ca5 100644
--- a/src/lib/stores/userStore.ts
+++ b/src/lib/stores/userStore.ts
@@ -1,4 +1,4 @@
 import { writable, type Writable } from 'svelte/store'
 
 export const user_role: Writable<any> = writable(null)
-export const isOnline: Writable<boolean> = writable(false)
+export const is_online: Writable<boolean> = writable(false)
diff --git a/src/lib/websocket.ts b/src/lib/websocket.ts
index a45f1352..a38ea3bd 100644
--- a/src/lib/websocket.ts
+++ b/src/lib/websocket.ts
@@ -31,6 +31,7 @@ const emitChannelUpdate = ({
 	delete noSocketChannel.userDetails
 	delete noSocketChannel.planDetails
 	delete noSocketChannel.viewDetails
+	delete noSocketChannel.platforms
 	channelSocket.send(
 		JSON.stringify({ eventName: `channel-update`, channel: noSocketChannel, roleUpdate })
 	)
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3f3babeb..04c2033e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -17,7 +17,7 @@
 	import { platform_connection, platform_message } from '$lib/stores/websocketStore'
 	import { isJsonString } from '$lib/utils'
 	import IconMageText from '$lib/assets/icons/IconMageText.svelte'
-	import { isOnline } from '$lib/stores/userStore'
+	import { is_online } from '$lib/stores/userStore'
 	import { current_theme } from '$lib/stores/helperStore'
 	import {
 		is_feature_video_responses_enabled,
@@ -103,9 +103,9 @@
 
 	platform_connection.subscribe(async (value: any) => {
 		if (!value) return
-		$isOnline = value === 'open'
+		$is_online = value === 'open'
 		if ($page.data.user?.userId && value === 'open') {
-			emitUserConnection({ userId: $page.data.user?.userId, isOnline: $isOnline })
+			emitUserConnection({ userId: $page.data.user?.userId, isOnline: $is_online })
 		}
 	})
 </script>
diff --git a/src/routes/channel/[channelId]/+page.server.ts b/src/routes/channel/[channelId]/+page.server.ts
index 52243b3b..24053bc1 100644
--- a/src/routes/channel/[channelId]/+page.server.ts
+++ b/src/routes/channel/[channelId]/+page.server.ts
@@ -11,8 +11,10 @@ export const actions = {
 		const file =
 			thumbnail !== null && thumbnail.size > 0
 				? thumbnail
-				: dataURLtoFile(imageSrc, 'thumbnail-image')
-		console.log(file)
+				: imageSrc
+				? dataURLtoFile(imageSrc, 'thumbnail-image')
+				: null
+		console.log('file---', file)
 		if (file !== null && file.size > 0 && file.type !== '') {
 			await putImage(`channels/thumbnail?channelId=${channelId}&bucketName=thumbnails`, file, {
 				userId: locals.user.userId,
diff --git a/src/routes/channel/[channelId]/+page.svelte b/src/routes/channel/[channelId]/+page.svelte
index 0ae5efae..9c4d037b 100644
--- a/src/routes/channel/[channelId]/+page.svelte
+++ b/src/routes/channel/[channelId]/+page.svelte
@@ -16,13 +16,7 @@
 	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
 	import DrawerEditChannel from '$lib/components/Channel/Chat/DrawerEditChannel.svelte'
-	import {
-		is_sharing_screen,
-		is_sharing_webcam,
-		is_sharing_audio,
-		updateVideoItems,
-		is_sharing_obs
-	} from '$lib/stores/streamStore'
+	import { is_sharing_webrtc, updateVideoItems } from '$lib/stores/streamStore'
 	import DrawerRestream from '$lib/components/Channel/Chat/DrawerRestream.svelte'
 
 	let channel: any,
@@ -41,13 +35,9 @@
 	$: if (channel) {
 		if (channel._id !== $page.params.channelId) {
 			if (isHostOrGuest) {
-				if ($is_sharing_screen) $is_sharing_screen = false
-				if ($is_sharing_webcam) $is_sharing_webcam = false
-				if ($is_sharing_audio) $is_sharing_audio = false
+				if ($is_sharing_webrtc) $is_sharing_webrtc = false
 			} else {
-				$is_sharing_screen = undefined
-				$is_sharing_webcam = undefined
-				$is_sharing_audio = undefined
+				$is_sharing_webrtc = undefined
 			}
 			handleWebsocket()
 			timeoutConnection()
@@ -82,13 +72,9 @@
 
 	onDestroy(async () => {
 		if (isHostOrGuest) {
-			if ($is_sharing_screen) $is_sharing_screen = false
-			if ($is_sharing_webcam) $is_sharing_webcam = false
-			if ($is_sharing_audio) $is_sharing_audio = false
+			if ($is_sharing_webrtc) $is_sharing_webrtc = false
 		} else {
-			$is_sharing_screen = undefined
-			$is_sharing_webcam = undefined
-			$is_sharing_audio = undefined
+			$is_sharing_webrtc = undefined
 		}
 		channels.forEach((ch: any) => {
 			if (ch.socket && ch.socket.constructor === WebSocket) ch.socket.close()
@@ -169,9 +155,11 @@
 	const attemptReconnect = () => {
 		setTimeout(async () => {
 			console.log('Reconnecting to WebSocket...')
-			const chan = channels.find((ch: any) => ch._id === $page.params.channelId)
-			delete chan.socket
-			await handleWebsocket()
+			channel = channels.find((ch: any) => ch._id === $page.params.channelId)
+			if (channel) {
+				delete channel.socket
+				await handleWebsocket()
+			}
 		}, 4000)
 	}
 
@@ -228,7 +216,9 @@
 					socket: channel.socket,
 					videoItems: channel.videoItems,
 					userDetails: channel.userDetails,
-					planDetails: channel.planDetails
+					planDetails: channel.planDetails,
+					viewDetails: channel.viewDetails,
+					platforms: channel.platforms
 				}
 
 				if (parsedMsg.roleUpdate) {
@@ -315,7 +305,7 @@
 	})
 </script>
 
-{#if !$is_sharing_screen && !$is_sharing_webcam && !$is_sharing_audio && isHostOrGuest}
+{#if !$is_sharing_webrtc && isHostOrGuest}
 	<DrawerRestream />
 {/if}
 

From 58e24fecb7522ddee85418d6a47c8ee9b4166b8b Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Wed, 13 Dec 2023 19:16:49 -0600
Subject: [PATCH 2/2] Chore: updated version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5ed6b229..4c24ec75 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.1.11",
+	"version": "0.1.12",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",