Merge pull request #467 from CodeCrowCorp/dev

Fix: rising-stars endpoint
CodeCrowCorp · Jun 2, 2023 · 3c38ed0 · 3c38ed0
2 parents ab1bb67 + 49f57a8
commit 3c38ed0
Show file tree

Hide file tree

Showing 14 changed files with 241 additions and 158 deletions.
diff --git a/src/lib/components/Browse/DrawerCreateChannel.svelte b/src/lib/components/Browse/DrawerCreateChannel.svelte
@@ -64,6 +64,12 @@
 		newChannel = newChannel
 	}
 
+	const onTagValidation = (evt: any) => {
+		if (Number(evt.target.value) < 1) {
+			evt.target.setCustomValidity('Please fill out this field.')
+		}
+	}
+
 	let refToggle: any
 	const toggleDrawer = () => {
 		if (refToggle) {
@@ -161,6 +167,16 @@
 								id="tags"
 								placeholder={newChannel.tags.length > 0 ? '' : 'Tag'} />
 							<span class="absolute right-0 top-1/2 text-gray-400 pr-3">({maxTagLabel})</span>
+							{#if newChannel.tags.length === 0}
+								<input
+									type="number"
+									name="mintags"
+									required
+									min="1"
+									class="opacity-0 pointer-events-none absolute left-0 right-0 mx-auto bottom-0"
+									bind:value={newChannel.tags.length}
+									on:invalid={onTagValidation} />
+							{/if}
 						</div>
 						<div class="relative">
 							<input

diff --git a/src/lib/components/Browse/Sections/SectionCarousel.svelte b/src/lib/components/Browse/Sections/SectionCarousel.svelte
@@ -7,9 +7,10 @@
 	import ItemCarousel from '$lib/components/Browse/Sections/ItemCarousel.svelte'
 	import 'swiper/css'
 
-	export let channels: any = []
+	export let channels: any = undefined
 
 	let swiper: Swiper
+	let isMounted = false
 
 	const initSwiper = () => {
 		swiper = new Swiper('.carousel', {
@@ -37,35 +38,46 @@
 	}
 
 	onMount(async () => {
-		initSwiper()
+		channels.then((data: any) => {
+			if(data.length){
+				initSwiper()
+				isMounted = true
+			}
+		})
 	})
+
+	$: swiperClass = isMounted ? 'opacity-1' : 'opacity-0'
 </script>
 
-{#if channels.length == 0}
+{#await channels}
 	<div class="flex flex-col my-4 relative overflow-x-auto scrollbar-hide">
 		<div role="status" class="flex flex-row gap-1 animate-pulse">
 			{#each Array(5) as _, index (index)}
 				<LoadingItemCarousel />
 			{/each}
 		</div>
 	</div>
-{:else}
-	<div class="relative p-1">
-		<div class="btn btn-square p-2 btn-prev absolute top-2/4 left-1 z-10 ml-3">
-			<IconDrawerLeft />
-		</div>
-		<div class="swiper carousel !pt-10 mx-8">
-			<div class="swiper-wrapper">
-				{#each channels as channel}
-					<ItemCarousel {channel} />
-				{/each}
+{:then value}
+	{#if value?.length > 0}
+		<div class={'relative p-1 transition-opacity ease-in duration-100 ' + swiperClass}>
+			<div class="btn btn-square p-2 btn-prev absolute top-2/4 left-1 z-10 ml-3">
+				<IconDrawerLeft />
+			</div>
+			<div class="swiper carousel !pt-10 mx-8">
+				<div class="swiper-wrapper">
+					{#each value as channel}
+						<ItemCarousel {channel} />
+					{/each}
+				</div>
+			</div>
+			<div class="btn btn-square z-10 p-2 btn-next absolute top-2/4 right-1 mr-3">
+				<IconDrawerChevron />
 			</div>
 		</div>
-		<div class="btn btn-square z-10 p-2 btn-next absolute top-2/4 right-1 mr-3">
-			<IconDrawerChevron />
-		</div>
-	</div>
-{/if}
+	{:else}
+		<div />
+	{/if}
+{/await}
 
 <style>
 	:global(.swiper-slide) {

diff --git a/src/lib/components/Browse/Sections/SectionUser.svelte b/src/lib/components/Browse/Sections/SectionUser.svelte
@@ -56,15 +56,9 @@
 				<div
 					bind:this={ref}
 					class="relative w-full flex gap-6 snap-x scrollbar-hide snap-mandatory overflow-x-auto flex-grow mx-14">
-					{#if sectionId === 'rising-stars'}
-						{#each value.users as user}
-							<ItemUser {user} />
-						{/each}
-					{:else}
-						{#each value as user}
-							<ItemUser {user} />
-						{/each}
-					{/if}
+					{#each value as user}
+						<ItemUser {user} />
+					{/each}
 				</div>
 
 				<div class="relative flex items-center mr-3">

diff --git a/src/lib/components/Channel/Chat/DrawerChat.svelte b/src/lib/components/Channel/Chat/DrawerChat.svelte
@@ -7,20 +7,12 @@
 	import { onDestroy, onMount } from 'svelte'
 	import { is_chat_drawer_open, was_chat_drawer_closed } from '$lib/stores/channelStore'
 	import { emitChatHistoryToChannel } from '$lib/websocket'
+	import { setRole } from '$lib/utils'
 
 	export let channel: any = undefined,
 		showEditChannelDrawer: boolean = false
 	let chatHistory: any[] = []
 
-	const setRole = (msg: any): any => {
-		if (msg.user?.userId === 'AI') msg.role = '🤖 AI'
-		else if (msg.user?.userId === channel?.user) msg.role = 'Host'
-		else if (channel?.mods?.includes(msg.user._id)) msg.role = 'Mod'
-		else if (msg.user?.userId === $page.data.user?.userId) msg.role = 'You'
-		else msg.role = 'Rando'
-		return msg
-	}
-
 	channel_message.subscribe((value) => {
 		if (!value) return
 		var parsedMsg = JSON.parse(value)
@@ -29,8 +21,12 @@
 				chatHistory = []
 				// if (Array.isArray(parsedMsg.data)) {
 				parsedMsg.data.forEach((message: any) => {
-					const updatedMsgWithRole = setRole(message)
-					chatHistory.push(updatedMsgWithRole)
+					message.role = setRole({
+						userId: message.user.userId,
+						channel,
+						currentUserId: $page.data.user?.userId
+					})
+					chatHistory.push(message)
 				})
 				// } else {
 				// 	parsedMsg = setRole(JSON.parse(parsedMsg.data))
@@ -39,7 +35,11 @@
 			} else if (parsedMsg.isMessageDeleted) {
 				chatHistory = chatHistory.filter((item) => item.timestamp !== parsedMsg.data.timestamp)
 			} else {
-				parsedMsg = setRole(parsedMsg)
+				parsedMsg.role = setRole({
+					userId: parsedMsg.user.userId,
+					channel,
+					currentUserId: $page.data.user?.userId
+				})
 				chatHistory.unshift(parsedMsg)
 			}
 			chatHistory = chatHistory

diff --git a/src/lib/components/Channel/Chat/Message.svelte b/src/lib/components/Channel/Chat/Message.svelte
@@ -14,8 +14,20 @@
 	export let sender: any, hostId: string, channel: any
 
 	$: coloredRole = getColoredRole(sender.role)
+
 	$: isGuest = channel?.guests?.includes(sender.user?.userId)
 
+	$: showBanItem =
+		hostId === $page.data.user?.userId &&
+		sender.user?.userId !== $page.data.user?.userId &&
+		channel?.mods?.includes($page.data.user?.userId) &&
+		sender.role !== '🤖 AI'
+
+	$: showRoleItem =
+		hostId === $page.data.user?.userId &&
+		sender.user?.userId !== $page.data.user?.userId &&
+		sender.role !== '🤖 AI'
+
 	const deleteMessage = () => {
 		if (sender.user?.userId === hostId || sender.user?.userId === $page.data.user?.userId) {
 			var channelId = sender.eventName.split('-').pop()
@@ -61,13 +73,11 @@
 	}
 </script>
 
-<!-- <ProfileCard /> -->
-
 <ul class="menu">
 	<li class="group relative dropdown">
 		<!--Host, Mod, You or Rando-->
 		<div class="p-1 border border-transparent rounded-lg flex gap-2 overflow-x-hidden">
-			<span>
+			<label>
 				{#if sender.role === '🤖 AI' || sender.role === 'Host' || sender.role === 'Mod' || sender.role === 'You'}
 					<span class="{coloredRole.tagColor} rounded-sm text-sm px-[5px] py-[2px] text-white"
 						>{sender.role}</span>
@@ -78,7 +88,10 @@
 						class="{coloredRole.textColor} font-medium">@{sender.user?.username}</span>
 				{/if}
 				<span class="break-all">{sender.message}</span>
-			</span>
+			</label>
+			<!-- <ul class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52">
+				<ProfileCard userId={sender.user?.userId} />
+			</ul> -->
 			<div
 				class="group-hover:block dropdown-menu absolute hidden right-0 dropdown dropdown-left dropdown-end"
 				tabindex="1">
@@ -88,22 +101,22 @@
 				<ul tabindex="1" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52">
 					<li class="disabled"><a><IconChatReact /> React </a></li>
 					<li class="disabled"><a><IconChatQuote /> Quote </a></li>
-					{#if hostId === $page.data.user?.userId && sender.user?.userId !== $page.data.user?.userId && channel?.mods?.includes($page.data.user?.userId)}
+					{#if showBanItem}
 						<li>
 							<a on:click={() => toggleBan()}
 								><IconChatBan /> {channel.bans?.includes(sender.user?.userId) ? 'Unban' : 'Ban'}
 							</a>
 						</li>
 					{/if}
-					{#if hostId === $page.data.user?.userId && sender.user?.userId !== $page.data.user?.userId}
+					{#if showRoleItem}
 						<li>
 							<a on:click={() => toggleMod()}
-								><IconChatMod /> {sender.role === 'Mod' ? 'Remove Mod' : 'Grant Mod'}
+								><IconChatMod /> {sender.role === 'Mod' ? 'Revoke Mod' : 'Grant Mod'}
 							</a>
 						</li>
 						<li>
 							<a on:click={() => toggleGuest()}
-								><IconChatGuest /> {isGuest ? 'Revoke Guest' : 'Guest'}
+								><IconChatGuest /> {isGuest ? 'Revoke Guest' : 'Grant Guest'}
 							</a>
 						</li>
 					{/if}

diff --git a/src/lib/components/Channel/Chat/ProfileCard.svelte b/src/lib/components/Channel/Chat/ProfileCard.svelte
@@ -1,48 +1,61 @@
-<div
-	data-popover
-	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="/docs/images/people/profile-picture-1.jpg"
-					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>
+<script lang="ts">
+	import { get } from '$lib/api'
+	import { onMount } from 'svelte'
+
+	export let userId: string
+	let profile: any
+
+	onMount(async () => {
+		profile = await get(`users/search/id?userId=${userId}`)
+	})
+</script>
+
+{#if !profile}
+	<progress class="progress w-full" />
+{:else}
+	<div
+		data-popover
+		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>
+				</div>
 			</div>
+			<p class="text-base font-semibold leading-none text-gray-900 dark:text-white">
+				<a href="">Jese Leos</a>
+			</p>
+			<p class="mb-3 text-sm font-normal">
+				<a href="" class="hover:underline">@jeseleos</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
+				>.
+			</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>
+					</a>
+				</li>
+				<li>
+					<a href="" class="hover:underline">
+						<span class="font-semibold text-gray-900 dark:text-white">3,758</span>
+						<span>Followers</span>
+					</a>
+				</li>
+			</ul>
 		</div>
-		<p class="text-base font-semibold leading-none text-gray-900 dark:text-white">
-			<a href="">Jese Leos</a>
-		</p>
-		<p class="mb-3 text-sm font-normal">
-			<a href="" class="hover:underline">@jeseleos</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
-			>.
-		</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>
-				</a>
-			</li>
-			<li>
-				<a href="" class="hover:underline">
-					<span class="font-semibold text-gray-900 dark:text-white">3,758</span>
-					<span>Followers</span>
-				</a>
-			</li>
-		</ul>
+		<div data-popper-arrow />
 	</div>
-	<div data-popper-arrow />
-</div>
+{/if}
diff --git a/src/lib/components/Channel/Stream/CommandList.svelte b/src/lib/components/Channel/Stream/CommandList.svelte
@@ -1,6 +1,4 @@
-<div
-	class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition-all animate-pulse">
-	<span class="flex items-center justify-center mb-4">Slash commands coming soon...</span>
+<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition-all">
 	<div class="grid grid-cols-2 gap-2">
 		<div class="grid grid-rows-3 gap-y-4">
 			<div class="flex items-center justify-end">Toggle mod status</div>

diff --git a/src/lib/components/Channel/Stream/StreamControls.svelte b/src/lib/components/Channel/Stream/StreamControls.svelte
@@ -86,7 +86,7 @@
 				meta: {
 					name: `${$page.params.channelId}-${$page.data.user.userId}-screen`
 				},
-				recording: { mode: 'automatic' }
+				recording: { mode: 'off' }
 			}
 		})
 		screenUid = liveInput.uid
@@ -136,7 +136,7 @@
 				meta: {
 					name: `${$page.params.channelId}-${$page.data.user.userId}-webcam`
 				},
-				recording: { mode: 'automatic' }
+				recording: { mode: 'off' }
 			}
 		})
 		webcamUid = liveInput.uid
@@ -186,7 +186,7 @@
 				meta: {
 					name: `${$page.params.channelId}-${$page.data.user.userId}-audio`
 				},
-				recording: { mode: 'automatic' }
+				recording: { mode: 'off' }
 			}
 		})
 		audioUid = liveInput.uid