Merge pull request #577 from gagan-suie/dev

Feat: added profile stats section and timer in videoItem
CodeCrowCorp · Jun 30, 2023 · 515cbb1 · 515cbb1
2 parents 94d493e + b9f28c3
commit 515cbb1
Show file tree

Hide file tree

Showing 16 changed files with 132 additions and 129 deletions.
diff --git a/src/lib/assets/icons/IconPlay.svelte b/src/lib/assets/icons/IconPlay.svelte
diff --git a/src/lib/assets/icons/profile/IconProfileSponsor.svelte b/src/lib/assets/icons/profile/IconProfileSponsor.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-8 h-8">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
+</svg>
diff --git a/src/lib/assets/icons/profile/IconProfileStreak.svelte b/src/lib/assets/icons/profile/IconProfileStreak.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-8 h-8">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+</svg>
diff --git a/src/lib/assets/icons/profile/IconProfileStreamDuration.svelte b/src/lib/assets/icons/profile/IconProfileStreamDuration.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-8 h-8">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+</svg>
diff --git a/src/lib/assets/icons/IconViews.svelte → ...ets/icons/profile/IconProfileViews.svelte b/src/lib/assets/icons/IconViews.svelte → ...ets/icons/profile/IconProfileViews.svelte
@@ -4,7 +4,7 @@
 	viewBox="0 0 24 24"
 	stroke-width="1.5"
 	stroke="currentColor"
-	class="w-6 h-6">
+	class="w-8 h-8">
 	<path
 		stroke-linecap="round"
 		stroke-linejoin="round"

diff --git a/src/lib/assets/icons/social/IconSocialDexlab.svg b/src/lib/assets/icons/social/IconSocialDexlab.svg
diff --git a/src/lib/assets/icons/social/IconSocialMagicEden.svg b/src/lib/assets/icons/social/IconSocialMagicEden.svg
diff --git a/src/lib/components/Channel/Stream/StreamContainer.svelte b/src/lib/components/Channel/Stream/StreamContainer.svelte
@@ -9,21 +9,14 @@
 	import { video_items } from '$lib/stores/streamStore'
 	import { channel_connection } from '$lib/stores/websocketStore'
 	import CommandList from '$lib/components/Channel/Stream/CommandList.svelte'
-	import { is_feature_stats_enabled } from '$lib/stores/remoteConfigStore'
 
 	const dispatch = createEventDispatcher()
 	export let userCount: number = 1,
 		channel: any,
 		channels: any = [],
 		isHostOrGuest: boolean = false
-	let streamTime: number = 0,
-		timerInterval: any,
-		formattedTime: string = '00:00:00'
 
 	$: isChannelSocketConnected = $channel_connection === `open-${channel._id}`
-	$: if (is_feature_stats_enabled) {
-		toggleTimer()
-	}
 
 	function autoActive(node: Element) {
 		const observer = new IntersectionObserver(callback, { threshold: 0.5 })
@@ -48,23 +41,6 @@
 
 		return { destroy: () => observer.disconnect() }
 	}
-
-	const toggleTimer = () => {
-		if (timerInterval) {
-			clearInterval(timerInterval)
-			timerInterval = null
-		} else {
-			timerInterval = setInterval(() => {
-				streamTime++
-				const hours = Math.floor(streamTime / 3600)
-				const minutes = Math.floor((streamTime % 3600) / 60)
-				const seconds = streamTime % 60
-				formattedTime = `${hours.toString().padStart(2, '0')}:${minutes
-					.toString()
-					.padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
-			}, 1000)
-		}
-	}
 </script>
 
 <div class="flex justify-center h-full">
@@ -89,12 +65,6 @@
 							</label>
 							<DropdownViewers {channel} />
 						</div>
-						{#if $is_feature_stats_enabled}
-							<span
-								class="btn btn-sm btn-neutral font-medium text-white border-none flex items-center">
-								{formattedTime}
-							</span>
-						{/if}
 					</div>
 					{#if channel && nextchannel?._id === $page.params.channelId}
 						<VideoGrid {channel} />

diff --git a/src/lib/components/Channel/Stream/StreamControls.svelte b/src/lib/components/Channel/Stream/StreamControls.svelte
@@ -28,11 +28,10 @@
 		$channel_connection === `open-${$page.params.channelId}` && $page.data.user?.userId
 	$: videoItemIsActive = $video_items?.some((video: any) => video._id === $page.data.user?.userId)
 
-	let screenUid: string = ''
-	let webcamUid: string = ''
-	let audioUid: string = ''
-
-	let subcriptions: any[] = []
+	let screenUid: string = '',
+		webcamUid: string = '',
+		audioUid: string = '',
+		subcriptions: any[] = []
 
 	const handleChatDrawer = () => {
 		if ($is_chat_drawer_open) {

diff --git a/src/lib/components/Channel/Stream/VideoItem.svelte b/src/lib/components/Channel/Stream/VideoItem.svelte
@@ -10,6 +10,7 @@
 	import { emitChannelUpdate } from '$lib/websocket'
 	import { getColoredRole, setRole } from '$lib/utils'
 	import IconChatBan from '$lib/assets/icons/chat/IconChatBan.svelte'
+	import { is_feature_stats_enabled } from '$lib/stores/remoteConfigStore'
 
 	export let video: any, channel: any
 
@@ -30,7 +31,11 @@
 		prevAudio: any,
 		isMounted: boolean = false,
 		isWebcamFocused: boolean = false,
-		speakingValue: number = 0
+		speakingValue: number = 0,
+		streamTime: number = 0,
+		timerInterval: any,
+		formattedTime: string = '00:00:00',
+		isHoverVideo: boolean = false
 
 	$: isScreenLive = false
 	$: isWebcamLive = false
@@ -63,6 +68,12 @@
 		handleAudioChanges()
 	}
 
+	$: if ($is_feature_stats_enabled && (isScreenLive || isWebcamLive)) {
+		toggleTimer()
+	}
+
+	$: animate = isWebcamFocused ? '' : 'transition-all'
+
 	const handleScreenChanges = () => {
 		prevScreen = video.screen
 		toggleClient({
@@ -286,16 +297,42 @@
 		})
 	}
 
-	$: animate = isWebcamFocused ? '' : 'transition-all'
+	const toggleTimer = () => {
+		if (timerInterval) {
+			clearInterval(timerInterval)
+			timerInterval = null
+		} else {
+			timerInterval = setInterval(() => {
+				streamTime++
+				const hours = Math.floor(streamTime / 3600)
+				const minutes = Math.floor((streamTime % 3600) / 60)
+				const seconds = streamTime % 60
+				formattedTime = `${hours.toString().padStart(2, '0')}:${minutes
+					.toString()
+					.padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+			}, 1000)
+		}
+	}
 </script>
 
-<div class={isScreenLive || isWebcamLive ? 'w-full h-full' : 'w-[500px] max-h-80'}>
+<div
+	class={isScreenLive || isWebcamLive ? 'w-full h-full' : 'w-[500px] max-h-80'}
+	on:mouseenter={() => (isHoverVideo = true)}
+	on:mouseleave={() => (isHoverVideo = false)}>
 	<div class="bg-base-200 relative w-full h-full rounded-md">
 		<img
 			src={video.avatar}
 			alt=""
 			class="absolute inset-0 w-24 md:w-24 mask mask-squircle object-cover m-auto" />
 		<div class="absolute inset-0">
+			{#if $is_feature_stats_enabled && (isScreenLive || isWebcamLive)}
+				<span
+					class="btn btn-sm btn-neutral font-medium text-white border-none items-center w-fit absolute top-2 left-2 {isHoverVideo
+						? 'opacity-100'
+						: 'opacity-50'}">
+					{formattedTime}
+				</span>
+			{/if}
 			<video id={`screen-${video._id}`} autoplay muted class="rounded-md w-full h-full" />
 			<div
 				use:draggable={{ bounds: 'parent' }}

diff --git a/src/lib/components/MainDrawer/DrawerMain.svelte b/src/lib/components/MainDrawer/DrawerMain.svelte
@@ -91,7 +91,9 @@
 									{streakCount} d
 								</p>
 								<IconDrawerStreamDuration />
-								<p class="col-span-2 tooltip text-start" data-tip="{hoursStreamed} hours streamed">
+								<p
+									class="col-span-2 tooltip text-start"
+									data-tip="{hoursStreamed} hours streamed today">
 									{hoursStreamed} h
 								</p>
 							</div>
@@ -200,12 +202,6 @@
 			<a href="https://twitter.com/CodeCrowCorp" target="_blank" rel="noreferrer">
 				<IconSocialTwitter />
 			</a>
-			<!-- <a href="https://magiceden.io" target="_blank" rel="noreferrer">
-				<img src={IconSocialMagicEden} alt="" />
-			</a>
-			<a href="https://www.dexlab.space" target="_blank" rel="noreferrer">
-				<img src={IconSocialDexlab} alt="" />
-			</a> -->
 		</div>
 		<p>Code Crow © 2023</p>
 		<p class="text-gray-500">

diff --git a/src/lib/components/MainDrawer/DrawerSmall.svelte b/src/lib/components/MainDrawer/DrawerSmall.svelte
@@ -91,7 +91,9 @@
 									{streakCount} d
 								</p>
 								<IconDrawerStreamDuration />
-								<p class="col-span-2 tooltip text-start" data-tip="{hoursStreamed} hours streamed">
+								<p
+									class="col-span-2 tooltip text-start"
+									data-tip="{hoursStreamed} hours streamed today">
 									{hoursStreamed} h
 								</p>
 							</div>

diff --git a/src/lib/components/Profile/Elements/Stats.svelte b/src/lib/components/Profile/Elements/Stats.svelte
@@ -1,53 +1,50 @@
+<script lang="ts">
+	import IconProfileViews from '$lib/assets/icons/profile/IconProfileViews.svelte'
+	import IconProfileStreak from '$lib/assets/icons/profile/IconProfileStreak.svelte'
+	import IconProfileStreamDuration from '$lib/assets/icons/profile/IconProfileStreamDuration.svelte'
+	// import IconProfileSponsor from '$lib/assets/icons/profile/IconProfileSponsor.svelte'
+	export let totalPageViews: Promise<any>,
+		highestAndCurrentStreak: Promise<any>,
+		totalAndAvgHours: Promise<any>
+</script>
+
 <div class="tooltip" data-tip="level 1">
 	<progress class="progress progress-accent w-64" value="30" max="100" />
 </div>
 <div class="stats shadow bg-base-200">
 	<div class="stat">
 		<div class="stat-figure text-primary">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				class="inline-block w-8 h-8 stroke-current"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
+			<IconProfileViews />
 		</div>
-		<div class="stat-title">Total Likes</div>
-		<div class="stat-value text-primary">25.6K</div>
+		<div class="stat-title">Page Views</div>
+		<div class="stat-value text-primary">2.6M</div>
 		<div class="stat-desc">21% more than last month</div>
 	</div>
 
 	<div class="stat">
 		<div class="stat-figure text-secondary">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				class="inline-block w-8 h-8 stroke-current"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+			<IconProfileStreak />
 		</div>
-		<div class="stat-title">Page Views</div>
-		<div class="stat-value text-secondary">2.6M</div>
+		<div class="stat-title">Highest / Current Streak</div>
+		<div class="stat-value text-secondary">25 / 5</div>
 		<div class="stat-desc">21% more than last month</div>
 	</div>
 
 	<div class="stat">
 		<div class="stat-figure text-secondary">
-			<div class="avatar online">
-				<div class="w-16 rounded-full">
-					<img src="https://placeimg.com/128/128/people" />
-				</div>
-			</div>
+			<IconProfileStreamDuration />
 		</div>
-		<div class="stat-value">86%</div>
-		<div class="stat-title">Tasks done</div>
-		<div class="stat-desc text-secondary">31 tasks remaining</div>
+		<div class="stat-title">Total / Avg Hours</div>
+		<div class="stat-value text-secondary">2,500 / 8</div>
+		<div class="stat-desc">21% more than last month</div>
 	</div>
+
+	<!-- <div class="stat">
+		<div class="stat-figure text-secondary">
+			<IconProfileSponsor />
+		</div>
+		<div class="stat-title">Sponsors</div>
+		<div class="stat-value text-secondary">500</div>
+		<div class="stat-desc">21% more than last month</div>
+	</div> -->
 </div>
diff --git a/src/lib/components/Profile/TabSection.svelte b/src/lib/components/Profile/TabSection.svelte
@@ -10,7 +10,10 @@
 	export let profileId: string = '',
 		channels: Promise<any>,
 		subscribers: Promise<any>,
-		interests: Promise<any>
+		interests: Promise<any>,
+		totalPageViews: Promise<any>,
+		highestAndCurrentStreak: Promise<any>,
+		totalAndAvgHours: Promise<any>
 
 	let tabs = ['Channels']
 	let activeTab = 0
@@ -32,7 +35,7 @@
 		<div class="w-full px-4">
 			{#if $is_feature_stats_enabled}
 				<div class="grid h-full" class:hidden={activeTab != tabs.indexOf('Stats')}>
-					<Stats />
+					<Stats {totalPageViews} {highestAndCurrentStreak} {totalAndAvgHours} />
 				</div>
 			{/if}
 			<div class="flex-auto h-full text-left" class:hidden={activeTab != tabs.indexOf('Channels')}>

diff --git a/src/routes/profile/[username]/+page.server.ts b/src/routes/profile/[username]/+page.server.ts
@@ -21,7 +21,10 @@ export const load = (async ({ params, locals }) => {
 			isSubscribed: get(`subscribes/relationship?source=${profile._id}`, {
 				userId: locals.user?.userId,
 				token: locals.user?.token
-			})
+			}),
+			totalPageViews: get(`stats`),
+			highestAndCurrentStreak: get(`stats`),
+			totalAndAvgHours: get(`stats`)
 		}
 	}
 }) satisfies PageServerLoad

diff --git a/src/routes/profile/[username]/+page.svelte b/src/routes/profile/[username]/+page.svelte
@@ -9,7 +9,9 @@
 	export let data: PageData
 
 	let showDrawer = false
-	let banner =  data.profile?.banner || 'https://images.unsplash.com/photo-1499336315816-097655dcfbda?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2710&amp;q=80';
+	let banner =
+		data.profile?.banner ||
+		'https://images.unsplash.com/photo-1499336315816-097655dcfbda?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2710&amp;q=80'
 </script>
 
 {#if !data.profile}
@@ -38,7 +40,10 @@
 						profileId={data.profile?._id}
 						channels={data.lazy.channels}
 						subscribers={data.lazy.subscribers}
-						interests={data.lazy.interests} />
+						interests={data.lazy.interests}
+						totalPageViews={data.lazy.totalPageViews}
+						highestAndCurrentStreak={data.lazy.highestAndCurrentStreak}
+						totalAndAvgHours={data.lazy.totalAndAvgHours} />
 				</div>
 			</div>
 		</div>