Merge pull request #746 from gagansuie/dev

Feat: added restream api
CodeCrowCorp · Oct 15, 2023 · c1471c9 · c1471c9
2 parents ae56610 + 06fc46d
commit c1471c9
Show file tree

Hide file tree

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

diff --git a/...sets/icons/channel/IconMultistream.svelte → .../assets/icons/channel/IconRestream.svelte b/...sets/icons/channel/IconMultistream.svelte → .../assets/icons/channel/IconRestream.svelte
diff --git a/src/lib/components/Channel/Stream/StreamContainer.svelte b/src/lib/components/Channel/Stream/StreamContainer.svelte
@@ -99,7 +99,7 @@
 		{/each}
 	</div>
 
-	<div class="absolute lg:bottom-0 bottom-10 m-7 w-full items-center justify-center flex">
+	<div class="absolute lg:bottom-0 bottom-10 m-3 w-full items-center justify-center flex">
 		<StreamControls bind:isHostOrGuest bind:channel bind:isScrollable />
 	</div>
 </div>
diff --git a/src/lib/components/Channel/Stream/StreamControls.svelte b/src/lib/components/Channel/Stream/StreamControls.svelte
@@ -21,8 +21,11 @@
 	import { channel_connection } from '$lib/stores/websocketStore'
 	import { onDestroy, onMount } from 'svelte'
 	import IconShareObs from '$lib/assets/icons/channel/IconShareObs.svelte'
-	import { is_feature_multistream_enabled } from '$lib/stores/remoteConfigStore'
-	import IconMultistream from '$lib/assets/icons/channel/IconMultistream.svelte'
+	import {
+		is_feature_apps_enabled,
+		is_feature_restream_enabled
+	} from '$lib/stores/remoteConfigStore'
+	import IconRestream from '$lib/assets/icons/channel/IconRestream.svelte'
 
 	export let isHostOrGuest: boolean = false,
 		channel: any,
@@ -53,7 +56,7 @@
 	}
 
 	const createLiveInput = async (trackData: any) => {
-		return await put(`cloudflare/live-input`, trackData, {
+		return await put(`live-input`, trackData, {
 			userId: $page.data.user?.userId,
 			token: $page.data.user?.token
 		})
@@ -68,14 +71,16 @@
 		channelTitle: string
 		username: string
 	}) => {
-		return await post(
-			`firebase/send-fcm`,
-			{ channelId, channelTitle, username },
-			{
-				userId: $page.data.user?.userId,
-				token: $page.data.user?.token
-			}
-		)
+		if ($is_feature_apps_enabled) {
+			return await post(
+				`firebase/send-fcm`,
+				{ channelId, channelTitle, username },
+				{
+					userId: $page.data.user?.userId,
+					token: $page.data.user?.token
+				}
+			)
+		}
 	}
 
 	const deleteLiveInput = async ({
@@ -89,7 +94,7 @@
 	}) => {
 		if (channelId && userId && trackType) {
 			return await del(
-				`cloudflare/live-input?channelId=${channelId}&userId=${userId}&trackType=${trackType}`,
+				`live-input?channelId=${channelId}&userId=${userId}&trackType=${trackType}`,
 				{
 					userId: $page.data.user?.userId,
 					token: $page.data.user?.token
@@ -349,66 +354,59 @@
 	})
 </script>
 
-<div class="flex gap-4">
-	<button
-		class="btn text-white border-none tooltip font-normal normal-case {$is_sharing_screen
-			? 'btn-primary'
-			: 'btn-neutral'}"
-		data-tip="Screen"
-		on:click={() => {
-			$is_sharing_screen = !$is_sharing_screen
-		}}
-		disabled={$is_sharing_obs || !isHostOrGuest || !isChannelSocketConnected || !videoItemIsActive}>
-		<IconShareScreen />
-	</button>
-
-	<button
-		class="btn text-white border-none tooltip font-normal normal-case {$is_sharing_webcam
-			? 'btn-primary'
-			: 'btn-neutral'}"
-		data-tip="Webcam"
-		on:click={() => {
-			$is_sharing_webcam = !$is_sharing_webcam
-		}}
-		disabled={$is_sharing_obs || !isHostOrGuest || !isChannelSocketConnected || !videoItemIsActive}>
-		<IconShareWebcam />
-	</button>
-
-	<button
-		class="btn text-white border-none tooltip font-normal normal-case {$is_sharing_audio
-			? 'btn-primary'
-			: 'btn-neutral'}"
-		data-tip="Audio"
-		on:click={() => {
-			$is_sharing_audio = !$is_sharing_audio
-		}}
-		disabled={$is_sharing_obs || !isHostOrGuest || !isChannelSocketConnected || !videoItemIsActive}>
-		<IconShareAudio />
-	</button>
+<div class="flex flex-col sm:flex-row gap-4">
+	<div class="flex flex-row gap-4 card p-3 bg-base-300">
+		<button
+			class="btn text-white border-none tooltip font-normal normal-case {$is_sharing_screen
+				? 'btn-primary'
+				: 'btn-neutral'}"
+			data-tip="Screen"
+			on:click={() => {
+				$is_sharing_screen = !$is_sharing_screen
+			}}
+			disabled={$is_sharing_obs ||
+				!isHostOrGuest ||
+				!isChannelSocketConnected ||
+				!videoItemIsActive}>
+			<IconShareScreen />
+		</button>
 
-	<button
-		class="btn text-white border-none tooltip font-normal normal-case {$is_sharing_obs
-			? 'btn-primary'
-			: 'btn-neutral'}"
-		data-tip="OBS"
-		on:click={() => {
-			$is_sharing_obs = !$is_sharing_obs
-		}}
-		disabled={$is_sharing_screen ||
-			$is_sharing_webcam ||
-			$is_sharing_audio ||
-			!isHostOrGuest ||
-			!isChannelSocketConnected ||
-			!videoItemIsActive}>
-		<IconShareObs />
-	</button>
+		<button
+			class="btn text-white border-none tooltip font-normal normal-case {$is_sharing_webcam
+				? 'btn-primary'
+				: 'btn-neutral'}"
+			data-tip="Webcam"
+			on:click={() => {
+				$is_sharing_webcam = !$is_sharing_webcam
+			}}
+			disabled={$is_sharing_obs ||
+				!isHostOrGuest ||
+				!isChannelSocketConnected ||
+				!videoItemIsActive}>
+			<IconShareWebcam />
+		</button>
 
-	{#if $is_feature_multistream_enabled}
+		<button
+			class="btn text-white border-none tooltip font-normal normal-case {$is_sharing_audio
+				? 'btn-primary'
+				: 'btn-neutral'}"
+			data-tip="Audio"
+			on:click={() => {
+				$is_sharing_audio = !$is_sharing_audio
+			}}
+			disabled={$is_sharing_obs ||
+				!isHostOrGuest ||
+				!isChannelSocketConnected ||
+				!videoItemIsActive}>
+			<IconShareAudio />
+		</button>
+	</div>
+	<div class="flex flex-row gap-4 card p-3">
 		<button
 			class="btn text-white border-none tooltip font-normal normal-case {$is_sharing_obs
 				? 'btn-primary'
 				: 'btn-neutral'}"
-			data-tip="Multistream"
+			data-tip="OBS"
 			on:click={() => {
 				$is_sharing_obs = !$is_sharing_obs
 			}}
@@ -418,18 +416,37 @@
 				!isHostOrGuest ||
 				!isChannelSocketConnected ||
 				!videoItemIsActive}>
-			<IconMultistream />
+			<IconShareObs />
 		</button>
-	{/if}
 
-	<button
-		class="btn text-white border-none tooltip font-normal normal-case {$is_chat_drawer_open
-			? 'btn-primary'
-			: 'btn-neutral'}"
-		data-tip="Chat"
-		on:click={() => handleChatDrawer()}>
-		<IconChatDrawer />
-	</button>
+		{#if $is_feature_restream_enabled}
+			<button
+				class="btn text-white border-none tooltip font-normal normal-case {$is_sharing_obs
+					? 'btn-primary'
+					: 'btn-neutral'}"
+				data-tip="Restream"
+				on:click={() => {
+					$is_sharing_obs = !$is_sharing_obs
+				}}
+				disabled={$is_sharing_screen ||
+					$is_sharing_webcam ||
+					$is_sharing_audio ||
+					!isHostOrGuest ||
+					!isChannelSocketConnected ||
+					!videoItemIsActive}>
+				<IconRestream />
+			</button>
+		{/if}
+
+		<button
+			class="btn text-white border-none tooltip font-normal normal-case {$is_chat_drawer_open
+				? 'btn-primary'
+				: 'btn-neutral'}"
+			data-tip="Chat"
+			on:click={() => handleChatDrawer()}>
+			<IconChatDrawer />
+		</button>
+	</div>
 </div>
 <input
 	type="checkbox"

diff --git a/src/lib/stores/remoteConfigStore.ts b/src/lib/stores/remoteConfigStore.ts
@@ -3,4 +3,4 @@ import { writable, type Writable } from 'svelte/store'
 export const is_feature_video_responses_enabled: Writable<boolean> = writable(false)
 export const is_feature_affiliate_enabled: Writable<boolean> = writable(false)
 export const is_feature_apps_enabled: Writable<boolean> = writable(false)
-export const is_feature_multistream_enabled: Writable<boolean> = writable(false)
+export const is_feature_restream_enabled: Writable<boolean> = writable(false)
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -23,7 +23,7 @@
 		is_feature_video_responses_enabled,
 		is_feature_affiliate_enabled,
 		is_feature_apps_enabled,
-		is_feature_multistream_enabled
+		is_feature_restream_enabled
 	} from '$lib/stores/remoteConfigStore'
 	import { env } from '$env/dynamic/public'
 	import { user_role } from '$lib/stores/userStore'
@@ -50,7 +50,7 @@
 		$is_feature_video_responses_enabled = env.PUBLIC_FEATURE_VIDEO_RESPONSES === 'true'
 		$is_feature_affiliate_enabled = env.PUBLIC_FEATURE_AFFILIATE === 'true'
 		$is_feature_apps_enabled = env.PUBLIC_FEATURE_APPS === 'true'
-		$is_feature_multistream_enabled = env.PUBLIC_FEATURE_MULTISTREAM === 'true'
+		$is_feature_restream_enabled = env.PUBLIC_FEATURE_RESTREAM === 'true'
 		await handleWebsocket()
 		if (!$category_list.length) {
 			$category_list = imageUrlsJson

diff --git a/src/routes/channel/[channelId]/+page.svelte b/src/routes/channel/[channelId]/+page.svelte
@@ -271,9 +271,7 @@
 							})
 						} else {
 							// for new users joining the channel
-							const liveInputs = await get(
-								`cloudflare/live-inputs?channelId=${$page.params.channelId}`
-							)
+							const liveInputs = await get(`live-inputs?channelId=${$page.params.channelId}`)
 							channel.videoItems = updateVideoItems([...activeGuests], liveInputs)
 						}
 					}