Merge remote-tracking branch 'upstream/dev' into dev

CodeCrowCorp · Jul 18, 2023 · 35685ad · 35685ad
2 parents 2d71217 + 2a58ab9
commit 35685ad
Show file tree

Hide file tree

Showing 12 changed files with 199 additions and 87 deletions.
diff --git a/src/lib/assets/icons/chat/IconChatScreenshot.svelte b/src/lib/assets/icons/chat/IconChatScreenshot.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-8 h-8">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+</svg>
diff --git a/src/lib/components/Channel/Chat/DrawerEditChannel.svelte b/src/lib/components/Channel/Chat/DrawerEditChannel.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
-	// import IconPhoto from '$lib/assets/icons/IconPhoto.svelte'
 	import { tags } from '$lib/stores/channelStore'
+	import { is_sharing_screen, is_sharing_webcam } from '$lib/stores/streamStore'
 	import { onDestroy, onMount } from 'svelte'
 	import Tags from 'svelte-tags-input'
 	import DrawerAddCategory from '$lib/components/Browse/DrawerAddCategory.svelte'
 	import { get } from '$lib/api'
 	import { enhance } from '$app/forms'
 	import { category_list } from '$lib/stores/channelStore'
 	import { emitChannelUpdate } from '$lib/websocket'
+	import IconChatScreenshot from '$lib/assets/icons/chat/IconChatScreenshot.svelte'
 
 	export let channel: any, showDrawer: boolean
 
@@ -16,7 +17,8 @@
 		showThumbnail = false,
 		showAddCategory = false,
 		maxTag = 3,
-		maxCategory = 4
+		maxCategory = 4,
+		imageSrc = ''
 
 	$: maxTagLabel = channel?.tags.length == maxTag ? 'max reached' : 'max ' + maxTag
 	$: maxCategoryLabel =
@@ -49,6 +51,37 @@
 		showThumbnail = false
 	}
 
+	const checkVideo = (e: any) => {
+		e.preventDefault()
+		showThumbnail = true
+		if (channel.videoItems.length > 0) {
+			let screenElement = document.getElementById(
+				`screen-${channel.videoItems[0]._id}`
+			) as HTMLVideoElement
+			let webcamElement = document.getElementById(
+				`webcam-${channel.videoItems[0]._id}`
+			) as HTMLVideoElement
+			let canvas = document.createElement('canvas')
+			canvas.width = 1920
+			canvas.height = 1080
+
+			let ctx = canvas.getContext('2d')
+
+			console.log(screenElement)
+			console.log(webcamElement)
+
+			if (ctx !== null && screenElement !== null && webcamElement !== null) {
+				ctx.drawImage(screenElement, 0, 0, canvas.width, canvas.height)
+				ctx.globalAlpha = 1
+				ctx.drawImage(webcamElement, 1400, 750, canvas.width - 1400, canvas.height - 750)
+			}
+
+			let screenshot = canvas.toDataURL('image/jpeg')
+			imageSrc = screenshot
+			//thumbnailRef.setAttribute('src', screenshot);
+		}
+	}
+
 	const addTag = (tagName: string) => {
 		tagName && channel.tags.length < maxTag ? channel.tags.push(tagName) : ''
 		channel = channel
@@ -101,25 +134,32 @@
 						Edit channel
 					</p>
 					<div class="flex flex-col p-3">
-						<p class="text-lg font-semibold">Please hide all sensitive data before going live.</p>
-
-						<!-- <div class="flex flex-row justify-center w-full">
-							<div class="card w-40 shadow-xl">
-								<div class="card-body items-center max-h-40 {showThumbnail ? '!p-3' : ''}">
-									{#if showThumbnail}
-										<img bind:this={thumbnailRef} src="" alt="Preview" class="rounded-lg h-full" />
+						<div class="flex flex-row justify-center w-full">
+							<div class="card w-60 shadow-xl" on:click={checkVideo}>
+								<div class="items-center max-h-40 {showThumbnail ? '!p-3' : ''}">
+									{#if imageSrc || channel.thumbnail}
+										<img
+											bind:this={thumbnailRef}
+											src={imageSrc || channel.thumbnail}
+											alt="Preview"
+											class="rounded-lg h-full" />
 									{:else}
-										<IconPhoto />
+										<div class="h-40 flex flex-col justify-center items-center">
+											<IconChatScreenshot />
+											Thumbnail
+										</div>
 									{/if}
 								</div>
 							</div>
 						</div>
-
+						<input type="hidden" name="imageSrc" value={imageSrc} />
+						<input type="hidden" name="channelId" value={channel._id} />
 						<input
 							bind:this={fileuploader}
 							on:change={fileupload}
 							type="file"
-							class="file-input file-input-bordered file-input-primary w-full mt-5" /> -->
+							name="thumbnail"
+							class="file-input file-input-bordered file-input-primary w-full mt-5" />
 						<input
 							bind:value={channel.title}
 							type="text"

diff --git a/src/lib/components/Channel/Stream/StreamContainer.svelte b/src/lib/components/Channel/Stream/StreamContainer.svelte
@@ -5,9 +5,7 @@
 	import VideoGrid from '$lib/components/Channel/Stream/VideoGrid.svelte'
 	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
-	import { createEventDispatcher, onMount } from 'svelte'
-	import { video_items } from '$lib/stores/streamStore'
-	import { channel_connection } from '$lib/stores/websocketStore'
+	import { createEventDispatcher } from 'svelte'
 
 	const dispatch = createEventDispatcher()
 	export let userCount: number = 1,
@@ -16,8 +14,6 @@
 		isHostOrGuest: boolean = false,
 		viewers: any[] = []
 
-	$: isChannelSocketConnected = $channel_connection === `open-${channel._id}`
-
 	function autoActive(node: Element) {
 		const observer = new IntersectionObserver(callback, { threshold: 0.5 })
 		observer.observe(node)
@@ -50,7 +46,8 @@
 				<div class="flex flex-col w-full">
 					<div class="flex gap-2 mb-3">
 						<span
-							class="btn btn-sm btn-neutral font-medium text-white border-none flex items-center {$video_items?.length
+							class="btn btn-sm btn-neutral font-medium text-white border-none flex items-center {channel
+								.videoItems?.length
 								? 'bg-red-700 hover:bg-red-700'
 								: ''}">
 							LIVE
@@ -67,14 +64,14 @@
 						</div>
 					</div>
 					{#if channel && nextchannel?._id === $page.params.channelId}
-						<VideoGrid {channel} />
+						<VideoGrid bind:channel />
 					{/if}
 				</div>
 			</div>
 		{/each}
 	</div>
 
 	<div class="absolute lg:bottom-0 bottom-10 m-7">
-		<StreamControls bind:isHostOrGuest {channel} />
+		<StreamControls bind:isHostOrGuest bind:channel />
 	</div>
 </div>
diff --git a/src/lib/components/Channel/Stream/StreamControls.svelte b/src/lib/components/Channel/Stream/StreamControls.svelte
@@ -15,8 +15,7 @@
 		is_sharing_audio,
 		is_sharing_screen,
 		is_sharing_webcam,
-		updateVideoItems,
-		video_items
+		updateVideoItems
 	} from '$lib/stores/streamStore'
 	import { channel_connection } from '$lib/stores/websocketStore'
 	import { onDestroy, onMount } from 'svelte'
@@ -26,7 +25,9 @@
 
 	$: isChannelSocketConnected =
 		$channel_connection === `open-${$page.params.channelId}` && $page.data.user?.userId
-	$: videoItemIsActive = $video_items?.some((video: any) => video._id === $page.data.user?.userId)
+	$: videoItemIsActive = channel.videoItems.some(
+		(video: any) => video._id === $page.data.user?.userId
+	)
 
 	let screenUid: string = '',
 		webcamUid: string = '',
@@ -92,7 +93,7 @@
 			}
 		})
 		screenUid = liveInput.uid
-		$video_items = updateVideoItems($video_items, [liveInput])
+		channel.videoItems = updateVideoItems(channel.videoItems, [liveInput])
 		emitAction({
 			channelSocket: channel?.socket,
 			channelId: $page.params.channelId,
@@ -110,7 +111,7 @@
 			trackType: 'screen',
 			inputId: screenUid
 		})
-		$video_items = updateVideoItems($video_items, [
+		channel.videoItems = updateVideoItems(channel.videoItems, [
 			{ _id: $page.data.user.userId, trackType: 'screen', isTrackActive: false }
 		])
 		emitAction({
@@ -142,7 +143,7 @@
 			}
 		})
 		webcamUid = liveInput.uid
-		$video_items = updateVideoItems($video_items, [liveInput])
+		channel.videoItems = updateVideoItems(channel.videoItems, [liveInput])
 		emitAction({
 			channelSocket: channel?.socket,
 			channelId: $page.params.channelId,
@@ -160,7 +161,7 @@
 			trackType: 'webcam',
 			inputId: webcamUid
 		})
-		$video_items = updateVideoItems($video_items, [
+		channel.videoItems = updateVideoItems(channel.videoItems, [
 			{ _id: $page.data.user.userId, trackType: 'webcam', isTrackActive: false }
 		])
 		emitAction({
@@ -192,7 +193,7 @@
 			}
 		})
 		audioUid = liveInput.uid
-		$video_items = updateVideoItems($video_items, [liveInput])
+		channel.videoItems = updateVideoItems(channel.videoItems, [liveInput])
 		emitAction({
 			channelSocket: channel?.socket,
 			channelId: $page.params.channelId,
@@ -210,7 +211,7 @@
 			trackType: 'audio',
 			inputId: audioUid
 		})
-		$video_items = updateVideoItems($video_items, [
+		channel.videoItems = updateVideoItems(channel.videoItems, [
 			{ _id: $page.data.user.userId, trackType: 'audio', isTrackActive: false }
 		])
 		emitAction({

diff --git a/src/lib/components/Channel/Stream/VideoGrid.svelte b/src/lib/components/Channel/Stream/VideoGrid.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
 	import VideoItem from '$lib/components/Channel/Stream/VideoItem.svelte'
 	import { getVideoGrids } from '$lib/utils'
-	import { video_items } from '$lib/stores/streamStore'
 	import CommandList from '$lib/components/Channel/Stream/CommandList.svelte'
 
 	export let channel: any
 
-	$: grid = getVideoGrids($video_items, 9)
+	$: grid = getVideoGrids(channel.videoItems, 9)
 </script>
 
-{#if $video_items?.length}
+{#if channel.videoItems?.length}
 	<div class="carousel h-full pb-6">
 		<div class="carousel-item w-full h-full">
 			<div class="flex flex-col h-full w-full">

diff --git a/src/lib/components/Channel/Stream/VideoItem.svelte b/src/lib/components/Channel/Stream/VideoItem.svelte
@@ -141,7 +141,7 @@
 		} else {
 			switch (trackType) {
 				case 'screen':
-					if (video.screen) {
+					if (video.screen && screenElement) {
 						screenWhep = new WHEPClient(
 							video.screen.webRTCPlayback.url,
 							screenElement,
@@ -156,7 +156,7 @@
 					}
 					break
 				case 'webcam':
-					if (video.webcam) {
+					if (video.webcam && webcamElement) {
 						webcamWhep = new WHEPClient(
 							video.webcam.webRTCPlayback.url,
 							webcamElement,
@@ -169,7 +169,7 @@
 					}
 					break
 				case 'audio':
-					if (video.audio) {
+					if (video.audio && audioElement) {
 						audioWhep = new WHEPClient(
 							video.audio.webRTCPlayback.url,
 							audioElement,
@@ -199,10 +199,6 @@
 
 	onMount(() => {
 		isGuest = channel?.guests?.includes(video._id)
-		screenElement = document.getElementById(`screen-${video._id}`) as HTMLVideoElement
-		webcamElement = document.getElementById(`webcam-${video._id}`) as HTMLVideoElement
-		audioElement = document.getElementById(`audio-${video._id}`) as HTMLAudioElement
-
 		if (screenElement) {
 			screenElement.addEventListener('dblclick', (event: any) => {
 				if (document.fullscreenElement) {
@@ -232,20 +228,19 @@
 	})
 
 	is_sharing_screen.subscribe((value) => {
-		//prevents duplicate calls from WHIPClient
-		if (value === false && screenElement?.srcObject) {
+		if (value === false) {
 			screenWhip?.disconnectStream()
 		}
 	})
 
 	is_sharing_webcam.subscribe((value) => {
-		if (value === false && webcamElement?.srcObject) {
+		if (value === false) {
 			webcamWhip?.disconnectStream()
 		}
 	})
 
 	is_sharing_audio.subscribe((value) => {
-		if (value === false && audioElement?.srcObject) {
+		if (value === false) {
 			audioWhip?.disconnectStream()
 		}
 	})
@@ -336,17 +331,27 @@
 					{formattedTime}
 				</span>
 			{/if}
-			<video id={`screen-${video._id}`} autoplay muted class="rounded-md w-full h-full" />
+			<video
+				bind:this={screenElement}
+				id={`screen-${video._id}`}
+				autoplay
+				muted
+				class="rounded-md w-full h-full" />
 			<div
 				use:draggable={{ bounds: 'parent' }}
 				on:mousedown={onMouseDown}
 				on:mouseup={onMouseUp}
 				class={animate +
 					' absolute ' +
 					(!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" />
+				<video
+					bind:this={webcamElement}
+					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" />
+			<video bind:this={audioElement} autoplay muted class="rounded-md w-0 h-0" />
 			<div class="absolute left-2 bottom-2 rounded-md dropdown">
 				<label
 					tabindex="0"

diff --git a/src/lib/stores/streamStore.ts b/src/lib/stores/streamStore.ts
@@ -1,7 +1,6 @@
 import { writable, type Writable } from 'svelte/store'
 import { env } from '$env/dynamic/public'
 
-export const video_items: Writable<any> = writable([])
 export const is_sharing_screen: Writable<boolean | undefined> = writable(undefined)
 export const is_sharing_webcam: Writable<boolean | undefined> = writable(undefined)
 export const is_sharing_audio: Writable<boolean | undefined> = writable(undefined)