Merge pull request #532 from CodeCrowCorp/dev

Feat: WIP subscriptions and fixed live tag on most active channels
CodeCrowCorp · Jun 19, 2023 · 032f1ad · 032f1ad
2 parents 58ac4c7 + 9adff72
commit 032f1ad
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 110 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/Channel/Chat/ProfileCard.svelte b/src/lib/components/Channel/Chat/ProfileCard.svelte
@@ -1,12 +1,21 @@
 <script lang="ts">
+	import { page } from '$app/stores'
 	import { get } from '$lib/api'
 	import { onMount } from 'svelte'
 
 	export let userId: string
-	let profile: any
+	let profile: any, subscriberCount: number, interestCount: number, isSubscribed: boolean
 
 	onMount(async () => {
 		profile = await get(`users/search/id?userId=${userId}`)
+		subscriberCount = await get(`subscribes/count?source=${userId}&sourceType=source1`)
+		interestCount = await get(`subscribes/count?source=${userId}&sourceType=source2`)
+		if ($page.data.user?.userId) {
+			isSubscribed = await get(`subscribes/relationship?source=${profile._id}`, {
+				userId: $page.data.user?.userId,
+				token: $page.data.user?.token
+			})
+		}
 	})
 </script>
 
@@ -18,40 +27,36 @@
 		role="tooltip"
 		class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600">
 		<div class="p-3">
-			<div class="flex items-center justify-between mb-2">
-				<a href="">
-					<img class="w-10 h-10 rounded-full" src={profile.avatar} alt="Jese Leos" />
-				</a>
-				<div>
-					<button
-						type="button"
-						class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-						>Follow</button>
+			{#if $page.data.user?.userId}
+				<div class="flex items-center justify-between mb-2">
+					<a href="">
+						<img class="w-10 h-10 rounded-full" src={profile.avatar} alt={profile.avatar} />
+					</a>
+					<div>
+						<button type="button" class="btn">Subscribe</button>
+					</div>
 				</div>
-			</div>
-			<p class="text-base font-semibold leading-none text-gray-900 dark:text-white">
-				<a href="">Jese Leos</a>
+			{/if}
+			<p class="text-base font-semibold leading-none">
+				<a href="">{profile.displayName}</a>
 			</p>
 			<p class="mb-3 text-sm font-normal">
-				<a href="" class="hover:underline">@jeseleos</a>
+				<a href="" class="hover:underline">@{profile.username}</a>
 			</p>
 			<p class="mb-4 text-sm font-light">
-				Open-source contributor. Building <a
-					href=""
-					class="text-blue-600 dark:text-blue-500 hover:underline">flowbite.com</a
-				>.
+				{profile.bio}
 			</p>
 			<ul class="flex text-sm font-light">
 				<li class="mr-2">
 					<a href="" class="hover:underline">
-						<span class="font-semibold text-gray-900 dark:text-white">799</span>
-						<span>Following</span>
+						<span class="font-semibold">{subscriberCount}</span>
+						<span>Subscribers</span>
 					</a>
 				</li>
 				<li>
 					<a href="" class="hover:underline">
-						<span class="font-semibold text-gray-900 dark:text-white">3,758</span>
-						<span>Followers</span>
+						<span class="font-semibold">{interestCount}</span>
+						<span>Interests</span>
 					</a>
 				</li>
 			</ul>

diff --git a/src/lib/components/Channel/Stream/StreamControls.svelte b/src/lib/components/Channel/Stream/StreamControls.svelte
@@ -19,6 +19,7 @@
 		video_items
 	} from '$lib/stores/streamStore'
 	import { channel_connection } from '$lib/stores/websocketStore'
+	import { onDestroy, onMount } from 'svelte';
 
 	export let isHostOrGuest: boolean = false,
 		channel: any
@@ -31,6 +32,8 @@
 	let webcamUid: string = ''
 	let audioUid: string = ''
 
+	let subcriptions: any[] = []
+
 	const handleChatDrawer = () => {
 		if ($is_chat_drawer_open) {
 			$is_chat_drawer_open = false
@@ -226,29 +229,41 @@
 		audioUid = ''
 	}
 
-	is_sharing_screen.subscribe((value) => {
-		if (value) {
-			startScreenStream()
-		} else if (value === false) {
-			stopScreenStream()
-		}
-	})
+	onMount(() => {
+		const sub1 = is_sharing_screen.subscribe((value) => {
+			if (value) {
+				startScreenStream()
+			} else if (value === false) {
+				stopScreenStream()
+			}
+		})
 
-	is_sharing_webcam.subscribe((value) => {
-		if (value) {
-			startWebcamStream()
-		} else if (value === false) {
-			stopWebcamStream()
-		}
+		const sub2 = is_sharing_webcam.subscribe((value) => {
+			if (value) {
+				startWebcamStream()
+			} else if (value === false) {
+				stopWebcamStream()
+			}
+		})
+
+		const sub3 = is_sharing_audio.subscribe((value) => {
+			if (value) {
+				startAudioStream()
+			} else if (value === false) {
+				stopAudioStream()
+			}
+		})
+
+		subcriptions.push(sub1, sub2, sub3)
 	})
 
-	is_sharing_audio.subscribe((value) => {
-		if (value) {
-			startAudioStream()
-		} else if (value === false) {
-			stopAudioStream()
-		}
+	onDestroy(() => {
+		subcriptions.forEach((subs) => {
+			subs()
+		})
 	})
+
+	
 </script>
 
 <div class="flex gap-4">

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