Merge pull request #757 from CodeCrowCorp/dev

v0.1.06

package.json

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

src/lib/components/Browse/DrawerCreateChannel.svelte

@@ -6,7 +6,6 @@
 	import DrawerAddCategory from '$lib/components/Browse/DrawerAddCategory.svelte'
 	import { get } from '$lib/api'
 	import { enhance } from '$app/forms'
-	import { page } from '$app/stores'
 	import { category_list } from '$lib/stores/channelStore'
 
 	export let showDrawer: boolean
@@ -17,8 +16,7 @@
 			description: '',
 			isPrivate: false,
 			category: [],
-			tags: [],
-			channelType: 'channel'
+			tags: []
 		},
 		fileuploader: HTMLInputElement,
 		thumbnailRef: any,
@@ -136,12 +134,14 @@
 							name="title"
 							required
 							placeholder="Title"
+							maxlength="50"
 							class="input input-primary input-bordered mt-5 w-full" />
 						<textarea
 							bind:value={newChannel.description}
 							placeholder="Description"
 							name="description"
 							required
+							maxlength="500"
 							class="textarea textarea-primary mt-5 text-base w-full h-28" />
 						<p class="text-base text-gray-500 mt-5 mb-2">Suggested Tags</p>
 						<div class="flex flex-wrap">

src/lib/components/Browse/Sections/ItemTable.svelte

@@ -12,7 +12,7 @@
 	class="cursor-pointer hover:btn-ghost border border-transparent"
 	on:click|preventDefault={() => goto(`/channel/${channel._id}`)}>
 	<td>
-		<div class="flex items-center space-x-2 my-3 pl-3">
+		<div class="flex items-center space-x-2 pl-3">
 			<div class="avatar">
 				<div
 					class="w-12 mask {channel.planDetails?.planTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
@@ -33,30 +33,29 @@
 		</div>
 	</td>
 	<td>
-		<div class="my-3">
-			{channel.title}
-			<br />
-			<span class="text-sm">{channel.description}</span>
+		<div class="my-3 flex flex-col">
+			<span class="truncate max-w-xl">{channel.title}</span>
+			<span class="text-sm truncate max-w-xl">{channel.description}</span>
 		</div>
 	</td>
 	<td>
 		<div class="flex gap-4">
 			<div
-				class="flex gap-2 my-3 tooltip"
+				class="flex gap-2 tooltip"
 				data-tip="{getNumberInThousands(channel.viewDetails?.count || 0)} views">
 				<IconViews />
 				<span>{getNumberInThousands(channel.viewDetails?.count || 0)}</span>
 			</div>
 			<div
-				class="flex gap-2 my-3 tooltip"
+				class="flex gap-2 tooltip"
 				data-tip="{getNumberInThousands(channel.memberCount || 0)} watching">
 				<IconViewers />
 				<span>{getNumberInThousands(channel?.memberCount || 0)}</span>
 			</div>
 		</div>
 	</td>
 	<td>
-		<div class="flex flex-wrap gap-2 my-3">
+		<div class="flex flex-wrap gap-2">
 			{#if channel.tags && channel.tags.length}
 				{#if channel.isLive}
 					<div>
@@ -74,7 +73,7 @@
 		</div>
 	</td>
 	<td>
-		<div class="flex flex-wrap my-3">
+		<div class="flex flex-wrap">
 			{#if channel.category && channel.category.length}
 				{#each channel.category as category}
 					<div class="tooltip" data-tip={category}>

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

@@ -145,12 +145,14 @@
 							name="title"
 							required
 							placeholder="Title"
+							maxlength="50"
 							class="input input-primary input-bordered mt-5 w-full" />
 						<textarea
 							bind:value={channel.description}
 							placeholder="Description"
 							name="description"
 							required
+							maxlength="500"
 							class="textarea textarea-primary mt-5 text-base w-full h-28" />
 						<p class="text-base text-gray-500 mt-5 mb-2">Suggested Tags</p>
 						<div class="flex flex-wrap">

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

@@ -20,6 +20,18 @@
 		isFollowing: boolean = false,
 		isFavorite: boolean = false
 
+	$: useEffect(() => {
+		getHostRelationship()
+	}, [channel?._id])
+
+	let copyText = 'Share'
+	const changeCopyText = () => {
+		copyText = 'Copied!'
+		setTimeout(() => {
+			copyText = 'Share'
+		}, 1000)
+	}
+
 	onMount(async () => {
 		if ($page.data.user?.userId) {
 			isFavorite = await get(`favorite?channelId=${channel._id}`, {
@@ -71,28 +83,15 @@
 			})
 		}
 	}
-
-	$: useEffect(() => {
-		getHostRelationship()
-	}, [channel?._id])
-
-	let copyText = 'Share'
-	const changeCopyText = () => {
-		copyText = 'Copied!'
-		setTimeout(() => {
-			copyText = 'Share'
-		}, 1000)
-	}
 </script>
 
 <div class="menu dropdown dropdown-bottom z-10">
 	<ul tabindex="-1">
 		<li>
-			<div class="p-3 text-xl mb-2 pb-2 border-purple-500 font-semibold border-b-2 flex">
-				<p>{channel.title || 'Chat'}</p>
-				<div
-					class="absolute right-0 mx-3 mt-1 center tooltip tooltip-left"
-					data-tip="View channel details">
+			<div
+				class="p-3 text-xl mb-2 pb-2 border-purple-500 font-semibold border-b-2 justify-between items-center">
+				<p class="truncate w-fill">{channel.title || 'Chat'}</p>
+				<div class="mt-1 tooltip tooltip-left" data-tip="View channel details">
 					<IconChatDownChevron />
 				</div>
 			</div>
@@ -110,7 +109,7 @@
 		{/if}
 
 		<li on:click={() => copyToClipboard(channel.description)} on:keyup>
-			<a class="text-sm max-w-md flex">{channel.description || 'No description'}</a>
+			<a class="text-sm max-w-md flex break-all">{channel.description || 'No description'}</a>
 		</li>
 		<li on:click={() => copyToClipboard(channel.category)} on:keyup>
 			<a
@@ -150,10 +149,10 @@
 						</div>
 					</div>
 					<div>
-						<div class="col-span-3 tooltip flex" data-tip={channel.userDetails?.displayName}>
+						<div class="col-span-3 flex">
 							<p class="truncate">{channel.userDetails?.displayName}</p>
 						</div>
-						<div class="col-span-3 tooltip flex gap-1" data-tip="@{channel.userDetails?.username}">
+						<div class="col-span-3 flex gap-1">
 							<p class="truncate">@{channel.userDetails?.username}</p>
 							{#if channel.planDetails?.planTier > 1}
 								<div class="text-accent font-bold">

src/routes/affiliate/+page.svelte

@@ -1,9 +1,44 @@
 <script lang="ts">
+	import ItemPlan from '$lib/components/Affiliate/ItemPlan.svelte'
+	import { onMount } from 'svelte'
 	import { page } from '$app/stores'
 	import { env } from '$env/dynamic/public'
+
+	let plans: any = [
+		{
+			name: 'Free',
+			// description:
+			// 	'Great for individuals just getting started with streaming and learning the platform.',
+			price: 0,
+			features: [
+				'Unlimited channels',
+				'Up to 9 guests in a live-stream',
+				'AI chat fully enabled',
+				'Up to 100 messages in chat history',
+				'Record and view streaming stats'
+			],
+			features2: []
+		},
+		{
+			name: 'Affiliate',
+			// description:
+			// 	'Perfect for dedicated streamers looking to grow their brand and expand their reach.',
+			price: 4,
+			features: [
+				'Everything in Free Tier',
+				'Expanded reach for brand growth',
+				'GPT-4 access (once available)',
+				'Unlimited chat history',
+				'Dedicated support'
+			],
+			features2: ['An affiliate badge', 'Modified avatar', 'Sponsor contributions (once available)']
+		}
+	]
+
+	onMount(() => {})
 </script>
 
-<section>
+<!-- <section>
 	<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
 		<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>
@@ -27,4 +62,21 @@
 			publishable-key="pk_test_zNzh2o1OkU21yGQAhUW6W0Yp00Z19jXMyA"
 			client-reference-id={$page.data.user?.userId} />
 	</div>
+</section> -->
+
+<section>
+	<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+		<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.
+			</p>
+		</div>
+		<div class="md:flex">
+			{#each plans as plan}
+				<ItemPlan {plan} />
+			{/each}
+		</div>
+	</div>
 </section>