From 7995d7390485cf9e99f80e3d3d55dcd076d1dc84 Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Wed, 14 Jun 2023 13:47:47 +0530
Subject: [PATCH 1/7] integrated emoji picker

---
 package.json                                  |  1 +
 .../components/Channel/Chat/ChatInput.svelte  | 16 ++++---
 .../Channel/Chat/EmojiPicker.svelte           | 42 +++++++++++++++++++
 3 files changed, 50 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/components/Channel/Chat/EmojiPicker.svelte

diff --git a/package.json b/package.json
index b73ab839..9786d991 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
 		"@tailwindcss/typography": "^0.5.9",
 		"animate.css": "^4.1.1",
 		"daisyui": "^3.1.0",
+		"emoji-picker-element": "^1.18.1",
 		"nprogress": "^0.2.0",
 		"playwright-e2e-coverage-report": "^1.0.28",
 		"svelte-tags-input": "^5.0.0",
diff --git a/src/lib/components/Channel/Chat/ChatInput.svelte b/src/lib/components/Channel/Chat/ChatInput.svelte
index c8950cac..ee52080a 100644
--- a/src/lib/components/Channel/Chat/ChatInput.svelte
+++ b/src/lib/components/Channel/Chat/ChatInput.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import IconChatAI from '$lib/assets/icons/chat/IconChatAI.svelte'
-	import IconChatEmoji from '$lib/assets/icons/chat/IconChatEmoji.svelte'
 	import IconChatGif from '$lib/assets/icons/chat/IconChatGif.svelte'
 	import IconChatCode from '$lib/assets/icons/chat/IconChatCode.svelte'
 	import IconChatSendMessage from '$lib/assets/icons/chat/IconChatSendMessage.svelte'
 	import { emitChannelUpdate, emitMessageToChannel } from '$lib/websocket'
 	import { page } from '$app/stores'
 	import { channel_connection } from '$lib/stores/websocketStore'
+	import EmojiPicker from './EmojiPicker.svelte'
+	
 
 	export let channel: any
 	export let users: any
@@ -75,6 +76,10 @@
 		selectedUser = 0
 	}
 
+	const onEmojiSelect = (emoji: any) => {
+		chatMessage = chatMessage.concat(emoji)
+	}
+
 	// toggle commands handlers
 
 	const toggleBan = (userId: string) => {
@@ -173,14 +178,7 @@
 		<IconChatAI />
 		<span class="sr-only">Enable AI</span>
 	</button>
-	<button
-		disabled
-		type="button"
-		class="btn btn-neutral text-white border-none tooltip font-normal normal-case"
-		data-tip="Emoji">
-		<IconChatEmoji />
-		<span class="sr-only">Add emoji</span>
-	</button>
+	<EmojiPicker onSelect={onEmojiSelect}/>
 	<button
 		disabled
 		type="button"
diff --git a/src/lib/components/Channel/Chat/EmojiPicker.svelte b/src/lib/components/Channel/Chat/EmojiPicker.svelte
new file mode 100644
index 00000000..15582460
--- /dev/null
+++ b/src/lib/components/Channel/Chat/EmojiPicker.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import IconChatEmoji from '$lib/assets/icons/chat/IconChatEmoji.svelte'
+
+    export let onSelect:any
+
+    let container: any;
+    let show = false
+
+    onMount(async () => {
+        
+    // Picker:
+    const {Picker} = await import("emoji-picker-element");
+    const picker = new Picker({
+      locale: "en",
+    });
+    
+    container.appendChild(picker);
+    if(onSelect)
+    picker.addEventListener('emoji-click', event => onSelect(event.detail.unicode));
+  });
+
+  const onclick = () => {
+    show = !show
+  }
+
+</script>
+
+<div>
+  <div  class={"dropdown dropdown-top " + (show && "dropdown-open") }>
+    <ui class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52" bind:this={container}>
+    </ui>
+  </div>
+</div>
+<button
+  on:click={onclick}
+  type="button"
+  class="btn btn-neutral text-white border-none tooltip font-normal normal-case"
+  data-tip="Emoji">
+  <IconChatEmoji />
+  <span class="sr-only">Add emoji</span>
+</button>
\ No newline at end of file

From 4f69a9e754cb203c295bd805d2ffd1416a72eae3 Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Wed, 14 Jun 2023 17:29:44 +0530
Subject: [PATCH 2/7] set margin left

---
 .../components/Channel/Chat/ChatInput.svelte  |  2 +-
 .../Channel/Chat/EmojiPicker.svelte           | 40 +++++++++++--------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/Channel/Chat/ChatInput.svelte b/src/lib/components/Channel/Chat/ChatInput.svelte
index ee52080a..4784e789 100644
--- a/src/lib/components/Channel/Chat/ChatInput.svelte
+++ b/src/lib/components/Channel/Chat/ChatInput.svelte
@@ -178,7 +178,7 @@
 		<IconChatAI />
 		<span class="sr-only">Enable AI</span>
 	</button>
-	<EmojiPicker onSelect={onEmojiSelect}/>
+	<EmojiPicker onSelect={onEmojiSelect} />
 	<button
 		disabled
 		type="button"
diff --git a/src/lib/components/Channel/Chat/EmojiPicker.svelte b/src/lib/components/Channel/Chat/EmojiPicker.svelte
index 15582460..27d3e6ae 100644
--- a/src/lib/components/Channel/Chat/EmojiPicker.svelte
+++ b/src/lib/components/Channel/Chat/EmojiPicker.svelte
@@ -5,7 +5,6 @@
     export let onSelect:any
 
     let container: any;
-    let show = false
 
     onMount(async () => {
         
@@ -20,23 +19,30 @@
     picker.addEventListener('emoji-click', event => onSelect(event.detail.unicode));
   });
 
-  const onclick = () => {
-    show = !show
-  }
 
 </script>
 
-<div>
-  <div  class={"dropdown dropdown-top " + (show && "dropdown-open") }>
-    <ui class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52" bind:this={container}>
-    </ui>
+
+  <div class="dropdown dropdown-top">
+    <button
+      tabindex="0" 
+      type="button"
+      class="btn btn-neutral text-white border-none tooltip font-normal normal-case"
+      data-tip="Emoji"
+    >
+      <IconChatEmoji />
+      <span class="sr-only">Add emoji</span>
+    </button>
+    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <div 
+      bind:this={container} 
+      tabindex="0" 
+      class={"dropdown-content menu shadow bg-base-100 rounded-box emoji-container"} >
+    </div>
   </div>
-</div>
-<button
-  on:click={onclick}
-  type="button"
-  class="btn btn-neutral text-white border-none tooltip font-normal normal-case"
-  data-tip="Emoji">
-  <IconChatEmoji />
-  <span class="sr-only">Add emoji</span>
-</button>
\ No newline at end of file
+
+<style global>
+    emoji-picker {
+      margin-left: -70px;
+    }
+</style>
\ No newline at end of file

From 3a26546db07b451ef22c2f43948f3629b6930455 Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Wed, 14 Jun 2023 17:51:14 +0530
Subject: [PATCH 3/7] fixed drawer width issue

---
 .../components/Channel/Chat/DrawerChat.svelte |  2 +-
 src/routes/channel/[channelId]/+page.svelte   | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/Channel/Chat/DrawerChat.svelte b/src/lib/components/Channel/Chat/DrawerChat.svelte
index d3cb97f2..fa9e7dcf 100644
--- a/src/lib/components/Channel/Chat/DrawerChat.svelte
+++ b/src/lib/components/Channel/Chat/DrawerChat.svelte
@@ -74,7 +74,7 @@
 
 </script>
 
-<div class="bg-base-100 flex flex-col overflow-y-hidden w-72 md:w-full h-full rounded-lg">
+<div class="bg-base-100 flex flex-col overflow-y-hidden w-96 md:w-full h-full rounded-lg">
 	<DropdownViewChannel bind:channel bind:showEditChannelDrawer />
 	<div class="flex flex-col-reverse p-3 grow overflow-y-scroll w-96">
 		{#each chatHistory as sender}
diff --git a/src/routes/channel/[channelId]/+page.svelte b/src/routes/channel/[channelId]/+page.svelte
index 7918079c..1dbd9bae 100644
--- a/src/routes/channel/[channelId]/+page.svelte
+++ b/src/routes/channel/[channelId]/+page.svelte
@@ -261,8 +261,8 @@
 
 {#if channel && channel._id === $page.params.channelId}
 	
-	<div class="relative h-full flex bg-base-200 overflow-hidden">
-		<div class="lg:ml-24 h-full flex-1 transition-all delay-75 ">
+	<div class="relative h-full bg-base-200 overflow-hidden">
+		<div class={"lg:ml-24 h-full transition-all delay-75 " + (!$is_chat_drawer_open ? "w-full" : "with-drawer")}>
 			<StreamContainer
 					bind:channel
 					bind:userCount
@@ -275,7 +275,6 @@
 			{/if}
 		</div>
 		{#if !$is_chat_drawer_destroy}
-			<div class={ "lg: transition-all lg:delay-75 " + ($is_chat_drawer_open ? "lg:w-96 lg:ml-4" : "w-0")}/>
 			<div class={"absolute right-0 top-0 " + ($is_chat_drawer_open ? "drawer-container" : "w-0")}>
 				<div class="drawer drawer-end">
 					<input
@@ -286,7 +285,7 @@
 					/>
 					<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 mobile-margin lg:drop-shadow-lg">
+						<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 />
 						</div>
 					</div>
@@ -313,12 +312,22 @@
 
 
 <style>
+
+	.with-drawer {
+		width: calc(100% - 500px);
+	}
+	@media screen and (max-width: 1020px) {
+		.with-drawer {
+			width: 100%;
+		}
+	}
+
 	.drawer-container {
 		width: 410px;
 		max-width: 100%;
 	}
 	/* for having space to touch to close drawer */
 	.mobile-margin {
-		margin-left: calc(100vw - 288px)
+		margin-left: calc(100vw - 48px)
 	}
 </style>
\ No newline at end of file

From d95ace312706cb3f5e08f9f96760a7d5b10b68a6 Mon Sep 17 00:00:00 2001
From: sitara-dev <sw.sitara@gmail.com>
Date: Wed, 14 Jun 2023 18:08:06 +0530
Subject: [PATCH 4/7] profile section width fixes

---
 src/lib/components/MainDrawer/DrawerMain.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/MainDrawer/DrawerMain.svelte b/src/lib/components/MainDrawer/DrawerMain.svelte
index c831f949..ddae65cf 100644
--- a/src/lib/components/MainDrawer/DrawerMain.svelte
+++ b/src/lib/components/MainDrawer/DrawerMain.svelte
@@ -73,8 +73,8 @@
 			<li>
 				<a href="/profile/{currentUser.username}" class="hero rounded-md cursor-pointer">
 					<div>
-						<div class="hero-content my-1">
-							<div class="max-w-md">
+						<div class="hero-content my-1 w-64">
+							<div class="max-w-full">
 								<div class="avatar {$isOnline ? 'online' : 'offline'}">
 									<div
 										class="w-24 mask mask-squircle ring ring-primary ring-offset-base-100 ring-offset-2">

From ae15fe3b60055ebbea48314ae2ac080825fc2e0f Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Wed, 14 Jun 2023 15:43:42 -0500
Subject: [PATCH 5/7] Chore: format emojiPicker

---
 .../components/Channel/Chat/ChatInput.svelte  |  3 +-
 .../Channel/Chat/EmojiPicker.svelte           | 71 +++++++++----------
 2 files changed, 33 insertions(+), 41 deletions(-)

diff --git a/src/lib/components/Channel/Chat/ChatInput.svelte b/src/lib/components/Channel/Chat/ChatInput.svelte
index 4784e789..b5ae95e3 100644
--- a/src/lib/components/Channel/Chat/ChatInput.svelte
+++ b/src/lib/components/Channel/Chat/ChatInput.svelte
@@ -6,8 +6,7 @@
 	import { emitChannelUpdate, emitMessageToChannel } from '$lib/websocket'
 	import { page } from '$app/stores'
 	import { channel_connection } from '$lib/stores/websocketStore'
-	import EmojiPicker from './EmojiPicker.svelte'
-	
+	import EmojiPicker from '$lib/components/Channel/Chat/EmojiPicker.svelte'
 
 	export let channel: any
 	export let users: any
diff --git a/src/lib/components/Channel/Chat/EmojiPicker.svelte b/src/lib/components/Channel/Chat/EmojiPicker.svelte
index 27d3e6ae..7a6e5131 100644
--- a/src/lib/components/Channel/Chat/EmojiPicker.svelte
+++ b/src/lib/components/Channel/Chat/EmojiPicker.svelte
@@ -1,48 +1,41 @@
 <script lang="ts">
-    import { onMount } from "svelte";
-    import IconChatEmoji from '$lib/assets/icons/chat/IconChatEmoji.svelte'
+	import { onMount } from 'svelte'
+	import IconChatEmoji from '$lib/assets/icons/chat/IconChatEmoji.svelte'
 
-    export let onSelect:any
+	export let onSelect: any
 
-    let container: any;
-
-    onMount(async () => {
-        
-    // Picker:
-    const {Picker} = await import("emoji-picker-element");
-    const picker = new Picker({
-      locale: "en",
-    });
-    
-    container.appendChild(picker);
-    if(onSelect)
-    picker.addEventListener('emoji-click', event => onSelect(event.detail.unicode));
-  });
+	let container: any
 
+	onMount(async () => {
+		// Picker:
+		const { Picker } = await import('emoji-picker-element')
+		const picker = new Picker({
+			locale: 'en'
+		})
 
+		container.appendChild(picker)
+		if (onSelect) picker.addEventListener('emoji-click', (event) => onSelect(event.detail.unicode))
+	})
 </script>
 
-
-  <div class="dropdown dropdown-top">
-    <button
-      tabindex="0" 
-      type="button"
-      class="btn btn-neutral text-white border-none tooltip font-normal normal-case"
-      data-tip="Emoji"
-    >
-      <IconChatEmoji />
-      <span class="sr-only">Add emoji</span>
-    </button>
-    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-    <div 
-      bind:this={container} 
-      tabindex="0" 
-      class={"dropdown-content menu shadow bg-base-100 rounded-box emoji-container"} >
-    </div>
-  </div>
+<div class="dropdown dropdown-top">
+	<button
+		tabindex="0"
+		type="button"
+		class="btn btn-neutral text-white border-none tooltip font-normal normal-case"
+		data-tip="Emoji">
+		<IconChatEmoji />
+		<span class="sr-only">Add emoji</span>
+	</button>
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<div
+		bind:this={container}
+		tabindex="0"
+		class={'dropdown-content menu shadow bg-base-100 rounded-box emoji-container'} />
+</div>
 
 <style global>
-    emoji-picker {
-      margin-left: -70px;
-    }
-</style>
\ No newline at end of file
+	emoji-picker {
+		margin-left: -70px;
+	}
+</style>

From 4cf856fda6fe369586e6303fd99d449c48f55115 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Thu, 15 Jun 2023 12:47:50 -0500
Subject: [PATCH 6/7] Fix: stream resizing and duplicate channels opening
 multiple streams

---
 src/lib/WHEPClient.ts                         |  7 ++++
 src/lib/WHIPClient.ts                         | 14 ++++---
 .../icons/chat/IconChatSendMessage.svelte     | 17 +++++++-
 .../components/Channel/Chat/ChatInput.svelte  |  2 +-
 .../Channel/Stream/VideoGrid.svelte           |  4 +-
 .../Channel/Stream/VideoItem.svelte           | 39 ++++++++++++-------
 src/routes/channel/[channelId]/+page.svelte   | 34 +++++++++-------
 7 files changed, 76 insertions(+), 41 deletions(-)

diff --git a/src/lib/WHEPClient.ts b/src/lib/WHEPClient.ts
index 630fdb97..363f5b3a 100644
--- a/src/lib/WHEPClient.ts
+++ b/src/lib/WHEPClient.ts
@@ -67,6 +67,13 @@ export default class WHEPClient extends EventTarget {
 			} else {
 				console.log('got unknown track ' + track)
 			}
+
+			if (trackType === 'screen' && track.readyState === 'live') {
+				this.dispatchEvent(new CustomEvent(`isScreenLive`, { detail: true }))
+			}
+			if (trackType === 'webcam' && track.readyState === 'live') {
+				this.dispatchEvent(new CustomEvent(`isWebcamLive`, { detail: true }))
+			}
 		}
 
 		this.peerConnection.addEventListener('connectionstatechange', (ev) => {
diff --git a/src/lib/WHIPClient.ts b/src/lib/WHIPClient.ts
index 5823d9a7..ebdc2252 100644
--- a/src/lib/WHIPClient.ts
+++ b/src/lib/WHIPClient.ts
@@ -88,9 +88,10 @@ export default class WHIPClient extends EventTarget {
 						})
 					}
 				})
-				stream.getVideoTracks()[0].addEventListener('ended', () => {
-					this.disconnectStream()
-				})
+				stream.getVideoTracks()[0].addEventListener('ended', () => this.disconnectStream())
+				if (stream.getVideoTracks()[0].readyState === 'live') {
+					this.dispatchEvent(new CustomEvent(`isScreenLive`, { detail: true }))
+				}
 				return stream
 			})
 		} else if (trackType === 'webcam') {
@@ -107,9 +108,10 @@ export default class WHIPClient extends EventTarget {
 						})
 					}
 				})
-				stream.getVideoTracks()[0].addEventListener('ended', () => {
-					this.disconnectStream()
-				})
+				stream.getVideoTracks()[0].addEventListener('ended', () => this.disconnectStream())
+				if (stream.getVideoTracks()[0].readyState === 'live') {
+					this.dispatchEvent(new CustomEvent(`isWebcamLive`, { detail: true }))
+				}
 				return stream
 			})
 		} else if (trackType === 'audio') {
diff --git a/src/lib/assets/icons/chat/IconChatSendMessage.svelte b/src/lib/assets/icons/chat/IconChatSendMessage.svelte
index 5ea35816..0bf8064d 100644
--- a/src/lib/assets/icons/chat/IconChatSendMessage.svelte
+++ b/src/lib/assets/icons/chat/IconChatSendMessage.svelte
@@ -1,8 +1,21 @@
-<svg
+<!-- <svg
 	aria-hidden="true"
 	class="w-6 h-6 rotate-90"
 	fill="currentColor"
 	viewBox="0 0 20 20"
 	xmlns="http://www.w3.org/2000/svg"
 	><path
-		d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" /></svg>
+		d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" /></svg> -->
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
+</svg>
diff --git a/src/lib/components/Channel/Chat/ChatInput.svelte b/src/lib/components/Channel/Chat/ChatInput.svelte
index c8950cac..7eebe4f4 100644
--- a/src/lib/components/Channel/Chat/ChatInput.svelte
+++ b/src/lib/components/Channel/Chat/ChatInput.svelte
@@ -285,7 +285,7 @@
 				on:click={() => {
 					sendMessage()
 				}}
-				class="inline-flex justify-center p-2 text-secondary rounded-full cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:hover:text-white dark:hover:bg-gray-600">
+				class="btn btn-ghost btn-circle text-secondary">
 				<IconChatSendMessage />
 				<span class="sr-only">Send message</span>
 			</button>
diff --git a/src/lib/components/Channel/Stream/VideoGrid.svelte b/src/lib/components/Channel/Stream/VideoGrid.svelte
index 609a1a4e..70edb201 100644
--- a/src/lib/components/Channel/Stream/VideoGrid.svelte
+++ b/src/lib/components/Channel/Stream/VideoGrid.svelte
@@ -9,11 +9,11 @@
 </script>
 
 {#if $video_items?.length}
-	<div class="carousel h-full pb-6">
+	<div class="carousel h-full">
 		<div class="carousel-item w-full h-full">
 			<div class="flex flex-col h-full w-full">
 				{#each grid as row}
-					<div class="flex flex-row gap-4 justify-center h-full mt-3">
+					<div class="flex flex-row gap-4 justify-center h-full">
 						{#each row as video}
 							<VideoItem bind:video {channel} />
 						{/each}
diff --git a/src/lib/components/Channel/Stream/VideoItem.svelte b/src/lib/components/Channel/Stream/VideoItem.svelte
index 9a888eb6..fda8fa71 100644
--- a/src/lib/components/Channel/Stream/VideoItem.svelte
+++ b/src/lib/components/Channel/Stream/VideoItem.svelte
@@ -32,6 +32,14 @@
 		isWebcamFocused: boolean = false,
 		speakingValue: number = 0
 
+	$: isScreenLive = false
+	$: isWebcamLive = false
+
+	$: if (channel) {
+		role = setRole({ userId: video._id, channel, currentUserId: $page.data.user?.userId })
+		coloredRole = getColoredRole(role)
+	}
+
 	$: showBanItem =
 		(channel.user === $page.data.user?.userId ||
 			channel?.mods?.includes($page.data.user?.userId)) &&
@@ -84,10 +92,11 @@
 							screenElement,
 							video.screen.trackType
 						)
-						screenWhip.addEventListener(
-							`localStreamStopped-${trackType}`,
-							() => ($is_sharing_screen = false)
-						)
+						screenWhip.addEventListener(`localStreamStopped-${trackType}`, () => {
+							$is_sharing_screen = false
+							isScreenLive = false
+						})
+						screenWhip.addEventListener(`isScreenLive`, (ev: any) => (isScreenLive = ev.detail))
 					}
 					break
 				case 'webcam':
@@ -97,10 +106,11 @@
 							webcamElement,
 							video.webcam.trackType
 						)
-						webcamWhip.addEventListener(
-							`localStreamStopped-${trackType}`,
-							() => ($is_sharing_webcam = false)
-						)
+						webcamWhip.addEventListener(`localStreamStopped-${trackType}`, () => {
+							$is_sharing_webcam = false
+							isWebcamLive = false
+						})
+						webcamWhip.addEventListener(`isWebcamLive`, (ev: any) => (isWebcamLive = ev.detail))
 					}
 					break
 				case 'audio':
@@ -127,8 +137,10 @@
 						)
 						screenElement.muted = false
 						screenElement.play()
+						screenWhep.addEventListener(`isScreenLive`, (ev: any) => (isScreenLive = ev.detail))
 					} else {
 						if (screenElement) screenElement.srcObject = null
+						isScreenLive = false
 					}
 					break
 				case 'webcam':
@@ -138,8 +150,10 @@
 							webcamElement,
 							video.webcam.trackType
 						)
+						webcamWhep.addEventListener(`isWebcamLive`, (ev: any) => (isWebcamLive = ev.detail))
 					} else {
 						if (webcamElement) webcamElement.srcObject = null
+						isWebcamLive = false
 					}
 					break
 				case 'audio':
@@ -171,11 +185,6 @@
 		isWebcamFocused = false
 	}
 
-	$: if (channel) {
-		role = setRole({ userId: video._id, channel, currentUserId: $page.data.user?.userId })
-		coloredRole = getColoredRole(role)
-	}
-
 	onMount(() => {
 		isGuest = channel?.guests?.includes(video._id)
 		screenElement = document.getElementById(`screen-${video._id}`) as HTMLVideoElement
@@ -280,7 +289,7 @@
 	$: animate = isWebcamFocused ? '' : 'transition-all'
 </script>
 
-<div class={video.screen || video.webcam ? 'w-full h-full' : 'w-[500px] max-h-80'}>
+<div class={isScreenLive || isWebcamLive ? 'w-full h-full' : 'w-[500px] max-h-80'}>
 	<div class="bg-base-200 relative w-full h-full rounded-md">
 		<img
 			src={video.avatar}
@@ -294,7 +303,7 @@
 				on:mouseup={onMouseUp}
 				class={animate +
 					' absolute ' +
-					(!video.screen ? 'w-full bottom-0 left-0 h-full' : 'w-1/4 bottom-0 right-0')}>
+					(!isScreenLive ? 'w-full bottom-0 left-0 h-full' : 'w-1/4 bottom-0 right-0')}>
 				<video id={`webcam-${video._id}`} autoplay muted class="rounded-md h-full w-full" />
 			</div>
 			<video id={`audio-${video._id}`} autoplay muted class="rounded-md w-0 h-0" />
diff --git a/src/routes/channel/[channelId]/+page.svelte b/src/routes/channel/[channelId]/+page.svelte
index 7918079c..a4dd3f9e 100644
--- a/src/routes/channel/[channelId]/+page.svelte
+++ b/src/routes/channel/[channelId]/+page.svelte
@@ -183,6 +183,10 @@
 
 	const loadMoreChannels = async () => {
 		let newchannels = await get(`channels?skip=${skip}&limit=${limit}`)
+		//Remove duplicate channels
+		newchannels = newchannels.filter(
+			(newChannel: any) => !channels.some((channel: any) => channel._id === newChannel._id)
+		)
 		channels = [...channels, ...newchannels]
 		skip += limit
 	}
@@ -260,33 +264,34 @@
 </script>
 
 {#if channel && channel._id === $page.params.channelId}
-	
 	<div class="relative h-full flex bg-base-200 overflow-hidden">
-		<div class="lg:ml-24 h-full flex-1 transition-all delay-75 ">
+		<div class="lg:ml-24 h-full flex-1 transition-all delay-75">
 			<StreamContainer
-					bind:channel
-					bind:userCount
-					bind:channels
-					on:loadMore={loadMoreChannels}
-					bind:isHostOrGuest />
+				bind:channel
+				bind:userCount
+				bind:channels
+				on:loadMore={loadMoreChannels}
+				bind:isHostOrGuest />
 
 			{#if showEditChannelDrawer}
 				<DrawerEditChannel bind:channel bind:showDrawer={showEditChannelDrawer} />
 			{/if}
 		</div>
 		{#if !$is_chat_drawer_destroy}
-			<div class={ "lg: transition-all lg:delay-75 " + ($is_chat_drawer_open ? "lg:w-96 lg:ml-4" : "w-0")}/>
-			<div class={"absolute right-0 top-0 " + ($is_chat_drawer_open ? "drawer-container" : "w-0")}>
+			<div
+				class={'lg: transition-all lg:delay-75 ' +
+					($is_chat_drawer_open ? 'lg:w-96 lg:ml-4' : 'w-0')} />
+			<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} 
-					/>
+						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 mobile-margin lg:drop-shadow-lg">
+						<div
+							class="h-full pt-12 lg:p-5 md:w-fit lg:ml-0 md:ml-0 mobile-margin lg:drop-shadow-lg">
 							<DrawerChat bind:channel bind:showEditChannelDrawer />
 						</div>
 					</div>
@@ -311,7 +316,6 @@
 		isError={true} />
 {/if}
 
-
 <style>
 	.drawer-container {
 		width: 410px;
@@ -319,6 +323,6 @@
 	}
 	/* for having space to touch to close drawer */
 	.mobile-margin {
-		margin-left: calc(100vw - 288px)
+		margin-left: calc(100vw - 288px);
 	}
-</style>
\ No newline at end of file
+</style>

From 693283f194e2bede21f9ff0c7bb3e01ec54c9c2f Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Thu, 15 Jun 2023 12:48:12 -0500
Subject: [PATCH 7/7] Fix: updated version

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

diff --git a/package.json b/package.json
index b73ab839..6a71d8c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",