Merge pull request #513 from gagan-suie/dev

Fix: stream resizing and duplicate channels opening multiple streams

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",

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) => {

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') {

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>

src/lib/components/Channel/Chat/ChatInput.svelte

@@ -282,7 +282,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>

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}

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" />

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,32 +264,33 @@
 </script>
 
 {#if channel && channel._id === $page.params.channelId}
-
 	<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")}>
+		<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: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={"absolute right-0 top-0 " + ($is_chat_drawer_open ? "drawer-container" : "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 w-max-full 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>
@@ -310,9 +315,7 @@
 		isError={true} />
 {/if}
 
-
 <style>
-
 	.with-drawer {
 		width: calc(100% - 500px);
 	}
@@ -328,6 +331,6 @@
 	}
 	/* for having space to touch to close drawer */
 	.mobile-margin {
-		margin-left: calc(100vw - 48px)
+		margin-left: calc(100vw - 48px);
 	}
-</style>
+</style>