Fix: added feature flags for stats and subscribes

package.json

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

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

@@ -8,22 +8,26 @@
 
 	export let onSelect: any, isChannelSocketConnected: any
 
+	$: if (isChannelSocketConnected) {
+		getTrending()
+	}
+
 	let gifs: { downsized_large: string; original: string; title: string }[] = []
 	let searched: { downsized_large: string; original: string; title: string }[] = []
 	let query: string = ''
 	let loading = false
 
-	onMount(async () => {
+	onMount(async () => {})
+
+	const getTrending = async () => {
 		loading = true
-		if (isChannelSocketConnected) {
-			const resp = await get('giphy/trending', {
-				userId: $page.data.user?.userId,
-				token: $page.data.user?.token
-			})
-			if (resp && Array.isArray(resp)) gifs = resp
-		}
+		const resp = await get('giphy/trending', {
+			userId: $page.data.user?.userId,
+			token: $page.data.user?.token
+		})
+		if (resp && Array.isArray(resp)) gifs = resp
 		loading = false
-	})
+	}
 
 	const onSearch = async (evt: any) => {
 		query = evt.target.value
@@ -65,7 +69,7 @@
 				<span class="loading loading-dots loading-sm" />
 			</div>
 		{:else if list.length}
-			<div class="grid grid-cols-4 gap-2 flex-1 overflow-auto mt-2">
+			<div class="grid grid-cols-2 gap-2 flex-1 overflow-auto mt-2">
 				{#each list as gif}
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
@@ -74,7 +78,7 @@
 							onSelect(gif.downsized_large)
 							forceClose()
 						}}>
-						<img src={gif.downsized_large} alt="gif" class="w-full border p-1" />
+						<img src={gif.downsized_large} alt="gif" class="w-full p-1" />
 					</div>
 				{/each}
 			</div>

src/lib/components/Profile/TabSection.svelte

@@ -1,16 +1,22 @@
 <script lang="ts">
-	// import ListSubscribe from '$lib/components/Profile/ListSubscribe.svelte'
+	import ListSubscribe from '$lib/components/Profile/ListSubscribe.svelte'
 	import SectionTable from '$lib/components/Browse/Sections/SectionTable.svelte'
-	// import Stats from '$lib/components/Profile/Elements/Stats.svelte'
+	import Stats from '$lib/components/Profile/Elements/Stats.svelte'
+	import {
+		is_feature_stats_enabled,
+		is_feature_subscribes_enabled
+	} from '$lib/stores/remoteConfigStore'
 
 	export let profileId: string = '',
 		channels: Promise<any>,
 		subscribers: Promise<any>,
 		interests: Promise<any>
 
-	// let tabs = ['Stats', 'Channels', 'Subscribers']
 	let tabs = ['Channels']
 	let activeTab = 0
+
+	$: if ($is_feature_subscribes_enabled) tabs.push('Subscribers')
+	$: if ($is_feature_stats_enabled) tabs.push('Stats')
 </script>
 
 <div class="mt-10 py-10 border-t border-blueGray-200 text-center">
@@ -24,15 +30,19 @@
 			{/each}
 		</div>
 		<div class="w-full px-4">
-			<!-- <div class="grid h-full" class:hidden={activeTab != 0}>
-				<Stats />
-			</div> -->
-			<div class="flex-auto h-full text-left" class:hidden={activeTab != 0}>
+			{#if $is_feature_stats_enabled}
+				<div class="grid h-full" class:hidden={activeTab != tabs.indexOf('Stats')}>
+					<Stats />
+				</div>
+			{/if}
+			<div class="flex-auto h-full text-left" class:hidden={activeTab != tabs.indexOf('Channels')}>
 				<SectionTable {channels} {profileId} />
 			</div>
-			<!-- <div class="flex-auto h-full" class:hidden={activeTab != 2}>
-				<ListSubscribe {subscribers} {interests} />
-			</div> -->
+			{#if $is_feature_subscribes_enabled}
+				<div class="flex-auto h-full" class:hidden={activeTab != tabs.indexOf('Subscribers')}>
+					<ListSubscribe {subscribers} {interests} />
+				</div>
+			{/if}
 		</div>
 	</div>
 </div>

src/lib/stores/remoteConfigStore.ts

@@ -2,3 +2,5 @@ import { writable, type Writable } from 'svelte/store'
 
 export const is_feature_video_responses_enabled: Writable<boolean> = writable(false)
 export const is_feature_premium_page_enabled: Writable<boolean> = writable(false)
+export const is_feature_subscribes_enabled: Writable<boolean> = writable(false)
+export const is_feature_stats_enabled: Writable<boolean> = writable(false)

src/routes/+layout.svelte

@@ -22,7 +22,9 @@
 	import { current_theme } from '$lib/stores/helperStore'
 	import {
 		is_feature_premium_page_enabled,
-		is_feature_video_responses_enabled
+		is_feature_subscribes_enabled,
+		is_feature_video_responses_enabled,
+		is_feature_stats_enabled
 	} from '$lib/stores/remoteConfigStore'
 	import { env } from '$env/dynamic/public'
 	import { user_role } from '$lib/stores/authStore'
@@ -47,6 +49,8 @@
 		$current_theme = localStorage.getItem('theme') || 'dark'
 		$is_feature_premium_page_enabled = env.PUBLIC_FEATURE_PREMIUM_PAGE === 'true'
 		$is_feature_video_responses_enabled = env.PUBLIC_FEATURE_VIDEO_RESPONSES === 'true'
+		$is_feature_subscribes_enabled = env.PUBLIC_FEATURE_SUBSCRIBES === 'true'
+		$is_feature_stats_enabled = env.PUBLIC_FEATURE_STATS === 'true'
 		await handleWebsocket()
 		if (!$category_list.length) {
 			$category_list = imageUrlsJson

src/routes/browse/+page.svelte

@@ -15,26 +15,6 @@
 
 	onMount(async () => {
 		$video_items = []
-
-		// const newUsers = await get('/api/users')
-		// newUsers.forEach(async (user: any) => {
-		// 	if (user.avatar.includes('ui-avatars')) {
-		// 		const newChannel = {
-		// 			title: '',
-		// 			description: '',
-		// 			category: '',
-		// 			tags: '',
-		// 			createdByDisplayName: user.displayName,
-		// 			createdByUsername: user.username,
-		// 			avatar: user.avatar,
-		// 			channelType: 'channel'
-		// 		}
-		// 		await post('channel', newChannel, {
-		// 			userId: user._id,
-		// 			token: $page.data.user.token
-		// 		})
-		// 	}
-		// })
 	})
 </script>
 

src/routes/profile/[username]/+page.server.ts

@@ -36,12 +36,9 @@ export const actions = {
 		addPropertyIfDefined(data, 'category', newUser)
 		addPropertyIfDefined(data, 'bio', newUser)
 
+		const avatar = data.get('avatar') as File
 
-		const avatar =  data.get('avatar') as File
-
-		const banner =  data.get('banner') as File
-
-
+		const banner = data.get('banner') as File
 
 		if (data.get('avatar') !== null && avatar.size > 0) {
 			const urlLocation = await putImage(
@@ -108,7 +105,6 @@ export const actions = {
 		await new Promise<any>((resolve) => setTimeout(resolve, 1000))
 	},
 	search: async ({ request, locals }: { request: any; locals: any }) => {
-		console.log('got here----324324234')
 		const data = await request.formData()
 		const search = data.get('query')
 		await new Promise<any>((resolve) => setTimeout(resolve, 1000))