Feat: auto thumbnail at 60 seconds

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.1.0",
+	"version": "0.1.01",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",

src/lib/assets/svg-json/image_urls.json

@@ -89,6 +89,7 @@
 	"Spring": "/category-optimized/web2/spring-logo.svg",
 	"SQL": "/category-optimized/web2/sql.svg",
 	"Stack Overflow": "/category-optimized/web2/stack-overflow.svg",
+	"Stripe": "/category-optimized/web2/stripe.svg",
 	"Svelte": "/category-optimized/web2/svelte.svg",
 	"Swift": "/category-optimized/web2/swift.svg",
 	"Symfony": "/category-optimized/web2/symfony.svg",

src/lib/assets/svg-json/web2.json

@@ -89,6 +89,7 @@
 	"Spring": "/category-optimized/web2/spring-logo.svg",
 	"SQL": "/category-optimized/web2/sql.svg",
 	"Stack Overflow": "/category-optimized/web2/stack-overflow.svg",
+	"Stripe": "/category-optimized/web2/stripe.svg",
 	"Svelte": "/category-optimized/web2/svelte.svg",
 	"Swift": "/category-optimized/web2/swift.svg",
 	"Symfony": "/category-optimized/web2/symfony.svg",

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

@@ -9,6 +9,7 @@
 	import { category_list } from '$lib/stores/channelStore'
 	import { emitChannelUpdate } from '$lib/websocket'
 	import IconChatScreenshot from '$lib/assets/icons/chat/IconChatScreenshot.svelte'
+	import { captureScreenShot } from '$lib/utils'
 
 	export let channel: any, showDrawer: boolean
 
@@ -18,7 +19,7 @@
 		showAddCategory = false,
 		maxTag = 3,
 		maxCategory = 4,
-		imageSrc = ''
+		imageSrc: string = ''
 
 	$: maxTagLabel = channel?.tags.length == maxTag ? 'max reached' : 'max ' + maxTag
 	$: maxCategoryLabel =
@@ -55,30 +56,7 @@
 		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);
+			imageSrc = captureScreenShot(channel)
 		}
 	}
 

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

@@ -91,6 +91,16 @@
 		</li>
 	</ul>
 	<ul tabindex="-1" class="dropdown-content menu shadow bg-base-200 rounded-box md:w-[23rem]">
+		{#if channel.thumbnail}
+			<li class="flex flex-row justify-center w-full">
+				<div class="w-full shadow-xl">
+					<div class="items-center cursor-pointer">
+						<img src={channel.thumbnail} alt="Preview" class="rounded-lg h-full" />
+					</div>
+				</div>
+			</li>
+		{/if}
+
 		<li on:click={() => copyToClipboard(channel.description)} on:keyup>
 			<a class="text-sm max-w-md flex">{channel.description || 'No description'}</a>
 		</li>

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

@@ -13,12 +13,12 @@
 		is_sharing_obs
 	} from '$lib/stores/streamStore'
 	import { emitChannelUpdate } from '$lib/websocket'
-	import { getColoredRole, setRole } from '$lib/utils'
+	import { captureScreenShot, dataURLtoFile, getColoredRole, setRole } from '$lib/utils'
 	import IconChatBan from '$lib/assets/icons/chat/IconChatBan.svelte'
 	import { is_feature_stats_enabled, is_feature_obs_enabled } from '$lib/stores/remoteConfigStore'
 	import { addScreen, getScreen, removeScreen } from '$lib/stream-utils'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
-	import { get, patch } from '$lib/api'
+	import { get, patch, putImage } from '$lib/api'
 	import LibLoader from '$lib/components/Global/LibLoader.svelte'
 
 	export let video: any, channel: any
@@ -438,6 +438,27 @@
 							}
 						)
 					}
+
+					if (
+						!channel.thumbnail &&
+						video._id === channel.user &&
+						video._id === $page.data.user.userId &&
+						streamTime === 60
+					) {
+						const imageSrc = captureScreenShot(channel)
+						const file = dataURLtoFile(imageSrc, 'thumbnail-image')
+						if (file !== null && file.size > 0 && file.type !== '') {
+							await putImage(
+								`channels/thumbnail?channelId=${channel._id}&bucketName=thumbnails`,
+								file,
+								{
+									userId: $page.data.user?.userId,
+									token: $page.data.user?.token
+								}
+							)
+							channel.thumbnail = imageSrc
+						}
+					}
 				} catch (err) {
 					console.log('err', err)
 				}

src/lib/utils.ts

@@ -301,3 +301,41 @@ export const getNumberInThousands = (number: number) => {
 		return number.toString()
 	}
 }
+
+export const captureScreenShot = (channel: any) => {
+	const screenElement = document.getElementById(
+		`screen-${channel.videoItems[0]._id}`
+	) as HTMLVideoElement
+	const webcamElement = document.getElementById(
+		`webcam-${channel.videoItems[0]._id}`
+	) as HTMLVideoElement
+	const canvas = document.createElement('canvas')
+	canvas.width = 1920
+	canvas.height = 1080
+
+	const 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)
+	}
+
+	return canvas.toDataURL('image/jpeg')
+	//thumbnailRef.setAttribute('src', screenshot);
+}
+
+export const dataURLtoFile = (dataurl: string, filename: string) => {
+	const arr = dataurl.split(',')
+	const mime = (arr[0] && arr[0].match(/:(.*?);/)?.[1]) || ''
+	const bstr = atob(arr[1])
+	let n = bstr.length
+	const u8arr = new Uint8Array(n)
+	while (n--) {
+		u8arr[n] = bstr.charCodeAt(n)
+	}
+	return new File([u8arr], filename, { type: mime })
+}

src/routes/affiliate/+page.svelte

@@ -8,8 +8,7 @@
 		<div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
 			<h2 class="mb-4 text-4xl tracking-tight font-extrabold">Designed for dedicated streamers</h2>
 			<p class="mb-5 font-light text-gray-500 sm:text-xl">
-				Collaborative streaming powered by AI. Our platform is designed to expand your reach and
-				grow your brand.
+				Collaborative streaming powered by AI. Expand your reach and grow your brand.
 			</p>
 			<a class="mb-5 link link-secondary" href={env.PUBLIC_STRIPE_BILLING_URL}
 				>Manage your subscription</a>

src/routes/channel/[channelId]/+page.server.ts

@@ -1,18 +1,7 @@
 import { putImage } from '$lib/api'
+import { dataURLtoFile } from '$lib/utils'
 import type { Actions } from './$types'
 
-const dataURLtoFile = (dataurl: string, filename: string) => {
-	const arr = dataurl.split(',')
-	const mime = (arr[0] && arr[0].match(/:(.*?);/)?.[1]) || ''
-	const bstr = atob(arr[1])
-	let n = bstr.length
-	const u8arr = new Uint8Array(n)
-	while (n--) {
-		u8arr[n] = bstr.charCodeAt(n)
-	}
-	return new File([u8arr], filename, { type: mime })
-}
-
 export const actions = {
 	'edit-channel': async ({ request, locals }) => {
 		const data: FormData = await request.formData()