screen/cam resize, correct video indexing and css

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

@@ -1,27 +1,26 @@
 <script lang="ts">
 	import VideoItem from '$lib/components/Channel/Stream/VideoItem.svelte'
-	import { divideNumber, cardCounts } from '$lib/utils'
+	import { getVideoGrids } from '$lib/utils'
 	import { video_items } from '$lib/stores/streamStore'
 
 	export let channel: any
 
 	const sender: any = {}
+	$: grid = getVideoGrids($video_items, 9)
 </script>
 
 {#if $video_items?.length}
 	<div class="carousel h-full pb-6">
-		{#each divideNumber($video_items.length, 16) as videos}
-			<div class="carousel-item w-full">
-				<div class="flex flex-col h-full w-full">
-					{#each cardCounts[videos] as row}
-						<div class="flex flex-row max-h-80 gap-4 justify-center h-full mt-3">
-							{#each Array(row) as _, i}
-								<VideoItem bind:video={$video_items[i]} {channel} {sender} />
-							{/each}
-						</div>
-					{/each}
-				</div>
+		<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">
+						{#each row as video}
+							<VideoItem bind:video {channel} {sender} />
+						{/each}
+					</div>
+				{/each}
 			</div>
-		{/each}
+		</div>
 	</div>
 {/if}

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

@@ -229,16 +229,20 @@
 	// }
 </script>
 
-<div class="w-[500px]">
+<div class={$is_sharing_screen || $is_sharing_webcam ? '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}
 			alt=""
 			class="absolute inset-0 w-24 md:w-24 mask mask-squircle object-cover m-auto" />
 		<div class="absolute inset-0">
-			<video id={`screen-${video._id}`} autoplay muted class="rounded-md" />
-			<div use:draggable={{ bounds: 'parent' }} class="absolute bottom-0 right-0 w-1/2 h-fit">
-				<video id={`webcam-${video._id}`} autoplay muted class="rounded-md" />
+			<video id={`screen-${video._id}`} autoplay muted class="rounded-md w-full h-full" />
+			<div
+				use:draggable={{ bounds: 'parent' }}
+				class={!$is_sharing_screen
+					? 'transition-all absolute w-full bottom-0 left-0 h-full'
+					: 'transition-all absolute 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" />
 			<div class="absolute left-2 bottom-2 rounded-md dropdown">

src/lib/utils.ts

@@ -124,7 +124,7 @@ Input: 20, 16
 Output: [16, 4]
 */
 export const divideNumber = (number: number, divider: number): number[] => {
-	if (number < divider) {
+	if (number <= divider) {
 		return [number]
 	}
 	const quotient = Math.floor(number / divider)
@@ -177,3 +177,26 @@ export const timeSince = (date: string) => {
 	}
 	return Math.floor(seconds) + ' seconds ago'
 }
+
+export const getVideoGrids = (list: any, limit: number) => {
+	if (!list.length) return []
+
+	const numList = divideNumber(list.length, limit)
+	const result: any[] = []
+	let pointer = 0
+
+	for (let i = 0; i < numList.length; i++) {
+		const row: any = cardCounts[numList[i]]
+		for (let j = 0; j < row.length; j++) {
+			result[j] = []
+			for (let k = 0; k < row[j]; k++) {
+				if (pointer < list.length) {
+					result[j].push({ ...list[pointer] })
+					pointer++
+				}
+			}
+		}
+	}
+
+	return result
+}