Merge pull request #531 from gagan-suie/dev

Feat: WIP subscriptions and fixed live tag on most active channels
CodeCrowCorp · Jun 19, 2023 · 9adff72 · 9adff72
2 parents 67322da + 8278879
commit 9adff72
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 69 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",

diff --git a/src/app.html b/src/app.html
@@ -3,7 +3,7 @@
 
 <head>
     <title>Mage</title>
-    <meta name="description" content="Mage is an AI-powered streaming platform for gamers and developers">
+    <meta name="description" content="Mage is an AI-powered collaborative streaming platform for gamers and developers">
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

diff --git a/src/lib/components/Browse/Sections/ItemCarousel.svelte b/src/lib/components/Browse/Sections/ItemCarousel.svelte
@@ -15,10 +15,12 @@
 	<div class="flex flex-col justify-between p-3 w-full h-full">
 		<div class="flex flex-row justify-between">
 			<div class="flex gap-2 mb-3">
-				<span
-					class="btn btn-sm rounded-md font-medium text-white border-none flex items-center bg-red-700 hover:bg-red-700">
-					LIVE
-				</span>
+				{#if channel.isLive}
+					<span
+						class="btn btn-sm rounded-md font-medium text-white border-none flex items-center bg-red-700 hover:bg-red-700">
+						LIVE
+					</span>
+				{/if}
 				<div class="dropdown dropdown-bottom">
 					<label
 						for=""

diff --git a/src/lib/components/Profile/Elements/SubscriberItem.svelte b/src/lib/components/Profile/Elements/SubscriberItem.svelte
@@ -4,7 +4,7 @@
 	export let subscriberItem: any
 </script>
 
-<div class="flex flex-row gap-2 px-4 py-2 rounded-md bg-base-100 justify-between">
+<div class="flex flex-row gap-2 px-4 py-2 card bg-base-100 justify-between">
 	<div class="flex">
 		<div class="avatar">
 			<div class="w-16 mask mask-squircle">
@@ -19,13 +19,13 @@
 	</div>
 
 	<div class="flex flex-row items-center gap-4">
-		<div>
+		<form action="?/subscribe" method="post">
 			<button
-				class="btn py-1 btn-sm btn-secondary"
-				disabled={subscriberItem?._id === $page.data.user?.userId}>Subscribe</button>
-		</div>
-
-		<div class="dropdown dropdown-end">
+				class="btn btn-sm btn-secondary text-white"
+				disabled={subscriberItem?._id === $page.data.user?.userId}
+				>{subscriberItem.isSubscriber ? 'Subscribe' : 'Unsubscribe'}</button>
+		</form>
+		<div class="dropdown dropdown-end z-20">
 			<button class="btn btn-circle" tabindex="0">
 				<IconMore />
 			</button>

diff --git a/src/lib/components/Profile/ListSubscribe.svelte b/src/lib/components/Profile/ListSubscribe.svelte
@@ -10,53 +10,55 @@
 </script>
 
 <div class="flex flex-row justify-center gap-5 mt-8">
-	{#await subscribers}
-		Loading...
-	{:then value}
-		{#if value}
-			<div class="card flex flex-col w-2/4 gap-2 bg-base-200 py-4 px-8">
-				<p class="text-start font-semibold">Subscribers ({$subscriber_count})</p>
+	<form action="?/search" method="GET">
+		{#await subscribers}
+			Loading...
+		{:then value}
+			{#if value}
+				<div class="card flex flex-col w-2/4 gap-2 bg-base-200 py-4 px-8">
+					<p class="text-start font-semibold">Subscribers ({$subscriber_count})</p>
 
-				<div class="input-group relative">
-					<input
-						name="query"
-						bind:value={querySubscribe}
-						type="search"
-						placeholder="Search subscribers"
-						class="input input-bordered input-primary w-full" />
-					<button class="btn btn-square btn-neutral text-white">
-						<IconSearch />
-					</button>
-				</div>
+					<div class="input-group relative">
+						<input
+							name="query"
+							bind:value={querySubscribe}
+							type="search"
+							placeholder="Search subscribers"
+							class="input input-bordered input-primary w-full" />
+						<button class="btn btn-square btn-neutral text-white">
+							<IconSearch />
+						</button>
+					</div>
 
-				{#each value as subscriberItem}
-					<SubscriberItem {subscriberItem} />
-				{/each}
-			</div>
-		{/if}
-	{/await}
-	{#await interests}
-		Loading...
-	{:then value}
-		{#if value}
-			<div class="card flex flex-col w-2/4 gap-2 bg-base-200 py-4 px-8">
-				<p class="text-start font-semibold">Interests ({$interest_count})</p>
-				<div class="input-group relative">
-					<input
-						name="query"
-						bind:value={queryInterest}
-						type="search"
-						placeholder="Search interests"
-						class="input input-bordered input-primary w-full" />
-					<button class="btn btn-square btn-neutral text-white">
-						<IconSearch />
-					</button>
+					{#each value as subscriberItem}
+						<SubscriberItem {subscriberItem} />
+					{/each}
 				</div>
+			{/if}
+		{/await}
+		{#await interests}
+			Loading...
+		{:then value}
+			{#if value}
+				<div class="card flex flex-col w-2/4 gap-2 bg-base-200 py-4 px-8">
+					<p class="text-start font-semibold">Interests ({$interest_count})</p>
+					<div class="input-group relative">
+						<input
+							name="query"
+							bind:value={queryInterest}
+							type="search"
+							placeholder="Search interests"
+							class="input input-bordered input-primary w-full" />
+						<button class="btn btn-square btn-neutral text-white">
+							<IconSearch />
+						</button>
+					</div>
 
-				{#each value as subscriberItem}
-					<SubscriberItem {subscriberItem} />
-				{/each}
-			</div>
-		{/if}
-	{/await}
+					{#each value as subscriberItem}
+						<SubscriberItem {subscriberItem} />
+					{/each}
+				</div>
+			{/if}
+		{/await}
+	</form>
 </div>
diff --git a/src/lib/components/Profile/TabSection.svelte b/src/lib/components/Profile/TabSection.svelte
@@ -14,22 +14,22 @@
 
 <div class="mt-10 py-10 border-t border-blueGray-200 text-center">
 	<div class="flex flex-wrap justify-center">
+		<div class="tabs tabs-boxed flex justify-center mb-5 w-fit">
+			{#each tabs as tab, index}
+				<button
+					class="tab"
+					class:tab-active={activeTab == index}
+					on:click={() => (activeTab = index)}>{tab}</button>
+			{/each}
+		</div>
 		<div class="w-full px-4">
-			<div class="tabs-boxed flex justify-center bg-base-100 pb-10">
-				{#each tabs as tab, index}
-					<button
-						class="tab"
-						class:tab-active={activeTab == index}
-						on:click={() => (activeTab = index)}>{tab}</button>
-				{/each}
-			</div>
-			<!-- <div class="grid h-full bg-base-100 py-10" class:hidden={activeTab != 0}>
+			<!-- <div class="grid h-full" class:hidden={activeTab != 0}>
 				<Stats />
 			</div> -->
-			<div class="flex-auto h-full text-left" class:hidden={activeTab != 0}>
+			<div class="flex-auto h-full text-left" class:hidden={activeTab != 1}>
 				<SectionTable {channels} {profileId} />
 			</div>
-			<!-- <div class="flex-auto h-full" class:hidden={activeTab != 1}>
+			<!-- <div class="flex-auto h-full" class:hidden={activeTab != 2}>
 				<ListSubscribe {subscribers} {interests} />
 			</div> -->
 		</div>

diff --git a/src/routes/profile/[username]/+page.server.ts b/src/routes/profile/[username]/+page.server.ts
@@ -67,6 +67,9 @@ export const actions = {
 	},
 	sponsor: async ({ request, locals }: { request: any; locals: any }) => {
 		await new Promise<any>((resolve) => setTimeout(resolve, 1000))
+	},
+	search: async ({ request, locals }: { request: any; locals: any }) => {
+		await new Promise<any>((resolve) => setTimeout(resolve, 1000))
 	}
 } satisfies Actions