Merge pull request #626 from sitaradev/redo-1

Redo 1

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

@@ -68,9 +68,17 @@ $: console.log("viewers : ", viewers)
 	}
 
 	const slectUserfromKey = (key: string) => {
-		if (key === 'ArrowDown' && selectedUser < viewers.length) {
+		if(selectedUser >= viewersWithOutHost.length - 1){
+			selectedUser = 0
+			return 
+		}
+		else if(selectedUser === 0){
+			selectedUser = viewersWithOutHost.length - 1
+			return
+		}
+		if (key === 'ArrowDown' && selectedUser < viewersWithOutHost.length - 1) {
 			selectedUser++
-		} else if (key === 'ArrowUp' && selectedUser >= 0) {
+		} else if (key === 'ArrowUp' && selectedUser > 0) {
 			selectedUser--
 		}
 	}
@@ -206,7 +214,6 @@ $: console.log("viewers : ", viewers)
 		(channel.user === $page.data.user?.userId || channel.mods?.includes($page.data.user?.userId)) &&
 		!showUsers
 
-	console.log("viewersWithOutHost: ", viewersWithOutHost)
 </script>
 
 <form class="rounded-lg bg-base-200 p-2 w-full relative">
@@ -301,7 +308,7 @@ $: console.log("viewers : ", viewers)
 							e.preventDefault()
 							if (showUsers) {
 								if (selectedUser >= 0) {
-									const user = viewers[selectedUser]
+									const user = viewersWithOutHost[selectedUser]
 									chatMessage = chatMessage.replace(/@/, '@' + user.username)
 								}
 							} else {

src/lib/components/Channel/Stream/VideoGrid.svelte

@@ -14,7 +14,7 @@
 			<div class="flex flex-col h-full w-full">
 				{#each grid as row}
 					<div class="flex flex-row gap-4 justify-center h-full">
-						{#each row as video}
+						{#each row as video (video._id)}
 							<VideoItem bind:video {channel} />
 						{/each}
 					</div>

src/lib/components/Channel/Stream/VideoItem.svelte

@@ -11,6 +11,7 @@
 	import { getColoredRole, setRole } from '$lib/utils'
 	import IconChatBan from '$lib/assets/icons/chat/IconChatBan.svelte'
 	import { is_feature_stats_enabled } from '$lib/stores/remoteConfigStore'
+	import { addScreen, getScreen, removeScreen } from '$lib/stream-utils'
 
 	export let video: any, channel: any
 
@@ -57,7 +58,7 @@
 		video._id !== $page.data.user?.userId &&
 		role !== '🤖 AI'
 
-	$: if (isMounted && video.screen !== prevScreen) {
+	$: if (isMounted && (video.screen !== prevScreen)) {
 		handleScreenChanges()
 	}
 
@@ -95,21 +96,40 @@
 	}
 
 	const toggleClient = ({ trackType }: { trackType: string }) => {
+
 		if ($page.data.user?.userId === video._id) {
+			
 			switch (trackType) {
 				case 'screen':
 					if (video.screen && $is_sharing_screen) {
-						screenWhip = new WHIPClient(
+						const key = video.screen.webRTCPlayback.url+"-"+video._id
+						const existed = getScreen(key)
+						screenWhip = existed || new WHIPClient(
 							video.screen.webRTC.url,
 							screenElement,
 							video.screen.trackType
 						)
+						if(existed){
+							existed.videoElement = screenElement
+							screenElement.srcObject = existed.localStream
+							$is_sharing_screen = true
+							isScreenLive = true
+						}
+						addScreen(key, screenWhip)
 						screenWhip.addEventListener(`localStreamStopped-${trackType}`, () => {
 							$is_sharing_screen = false
 							isScreenLive = false
+							removeScreen(key)
 						})
 						screenWhip.addEventListener(`isScreenLive`, (ev: any) => (isScreenLive = ev.detail))
 					}
+					else if(!video.screen){
+						if(screenElement){
+							screenElement.srcObject = null
+						}
+						$is_sharing_screen = false
+						isScreenLive = false
+					}
 					break
 				case 'webcam':
 					if (video.webcam && $is_sharing_webcam) {
@@ -124,6 +144,11 @@
 						})
 						webcamWhip.addEventListener(`isWebcamLive`, (ev: any) => (isWebcamLive = ev.detail))
 					}
+					else if(!video.webcam){
+						if(webcamElement){
+							webcamElement.srcObject = null
+						}
+					}
 					break
 				case 'audio':
 					if (video.audio && $is_sharing_audio) {
@@ -142,11 +167,20 @@
 			switch (trackType) {
 				case 'screen':
 					if (video.screen && screenElement) {
-						screenWhep = new WHEPClient(
+						const key = video.screen.webRTCPlayback.url +"-"+video._id
+						const existed = getScreen(key)
+						screenWhep = existed || new WHEPClient(
 							video.screen.webRTCPlayback.url,
 							screenElement,
 							video.screen.trackType
 						)
+						if(existed){
+							existed.videoElement = screenElement
+							screenElement.srcObject = existed.stream
+							isScreenLive = true
+						}
+						
+						addScreen(key, screenWhep)
 						screenElement.muted = false
 						screenElement.play()
 						screenWhep.addEventListener(`isScreenLive`, (ev: any) => (isScreenLive = ev.detail))
@@ -309,13 +343,15 @@
 			}, 1000)
 		}
 	}
+
 </script>
 
 <div
 	class={isScreenLive || isWebcamLive ? 'w-full h-full' : 'w-[500px] max-h-80'}
 	on:mouseenter={() => (isHoverVideo = true)}
 	on:mouseleave={() => (isHoverVideo = false)}>
 	<div class="bg-base-200 relative w-full h-full rounded-md">
+		{video._id}
 		<img
 			src={video.avatar}
 			alt=""

src/lib/stream-utils.ts

@@ -0,0 +1,13 @@
+var aliveScreens:any = {}
+
+export const addScreen = (key:string, screen:any) => {
+    aliveScreens[key] = screen
+}
+
+export const getScreen = (key:string):any => {
+    return aliveScreens[key]
+}
+
+export const removeScreen = (key:string) => {
+    delete aliveScreens[key]
+}

src/routes/channel/[channelId]/+page.svelte

@@ -199,7 +199,7 @@
 	}
 
 	channel_message.subscribe(async (value: any) => {
-		if (!value || $page.params.channelId !== channel._id) return
+		if (!value || (channel && $page.params.channelId !== channel._id)) return
 		var parsedMsg = JSON.parse(value)
 		switch (parsedMsg.eventName) {
 			case `channel-update-${$page.params.channelId}`:
@@ -234,6 +234,7 @@
 					channel.videoItems = channel.videoItems.filter(
 						(video: any) => video._id !== parsedMsg.quitUserId
 					)
+					console.log("channel.videoItems on quit : ", channel.videoItems)
 				} else {
 					const activeGuests = parsedMsg.activeGuests
 					if (activeGuests?.length) {
@@ -259,13 +260,16 @@
 			case `channel-streaming-action-${$page.params.channelId}`:
 				switch (parsedMsg.data.action) {
 					case 'toggleTrack':
-						if ($page.data.user?.userId) {
-							if ($page.data.user.userId !== parsedMsg.data.video._id) {
+						if(channel){
+							if ($page.data.user?.userId) {
+								if ($page.data.user.userId !== parsedMsg.data.video._id) {
+									channel.videoItems = updateVideoItems(channel.videoItems, [parsedMsg.data.video])
+								}
+							} else {
 								channel.videoItems = updateVideoItems(channel.videoItems, [parsedMsg.data.video])
 							}
-						} else {
-							channel.videoItems = updateVideoItems(channel.videoItems, [parsedMsg.data.video])
 						}
+						
 						break
 				}
 				break