Merge pull request #514 from CodeCrowCorp/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",
@@ -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",

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

@@ -1,12 +1,12 @@
 <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 '$lib/components/Channel/Chat/EmojiPicker.svelte'
 
 	export let channel: any
 	export let users: any
@@ -75,6 +75,10 @@
 		selectedUser = 0
 	}
 
+	const onEmojiSelect = (emoji: any) => {
+		chatMessage = chatMessage.concat(emoji)
+	}
+
 	// toggle commands handlers
 
 	const toggleBan = (userId: string) => {
@@ -173,14 +177,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"
@@ -285,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/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}

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import IconChatEmoji from '$lib/assets/icons/chat/IconChatEmoji.svelte'
+
+	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))
+	})
+</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>
+
+<style global>
+	emoji-picker {
+		margin-left: -70px;
+	}
+</style>

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

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,33 @@
 </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="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
-					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={'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 w-max-full mobile-margin lg:drop-shadow-lg">
 							<DrawerChat bind:channel bind:showEditChannelDrawer />
 						</div>
 					</div>
@@ -311,14 +315,22 @@
 		isError={true} />
 {/if}
 
-
 <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>
+</style>