Merge pull request #1206 from gagansuie/dev

Fix: url page.params.channelId not changing on navigation
CodeCrowCorp · May 1, 2024 · 059791b · 059791b
2 parents 6bd78a4 + bc74eaf
commit 059791b
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 92 deletions.
diff --git a/src/lib/components/Channel/Chat/DrawerRestream.svelte b/src/lib/components/Channel/Chat/DrawerRestream.svelte
@@ -7,6 +7,8 @@
 	import IconSocialTwitch from '$lib/assets/icons/social/IconSocialTwitch.svelte'
 	import IconSocialYouTube from '$lib/assets/icons/social/IconSocialYouTube.svelte'
 
+	export let channelId: string
+
 	$: auth = {
 		userId: $page.data.user?.userId,
 		token: $page.data.user?.token
@@ -80,7 +82,7 @@
 	})
 
 	const getLiveInput = async () => {
-		return await get(`live-input?channelId=${$page.params.channelId}&trackType=rtmps`, {
+		return await get(`live-input?channelId=${channelId}&trackType=rtmps`, {
 			userId: $page.data.user?.userId,
 			token: $page.data.user?.token
 		})
@@ -122,17 +124,14 @@
 			)
 			const url = filteredIngests[0].url_template
 			const ingestUrl = url.substring(0, url.lastIndexOf('/'))
-			const linkRes = await get(
-				`twitch/link?channelId=${$page.params.channelId}&ingestUrl=${ingestUrl}`,
-				auth
-			)
+			const linkRes = await get(`twitch/link?channelId=${channelId}&ingestUrl=${ingestUrl}`, auth)
 			if (linkRes.redirect) window.location.replace(linkRes.redirectUrl)
 		} catch (err) {}
 	}
 
 	const linkYoutube = async () => {
 		try {
-			const linkRes = await get(`youtube/link?channelId=${$page.params.channelId}`, auth)
+			const linkRes = await get(`youtube/link?channelId=${channelId}`, auth)
 			if (linkRes.redirect) window.location.replace(linkRes.redirectUrl)
 		} catch (error) {}
 	}

diff --git a/src/lib/components/Channel/Stream/StreamContainer.svelte b/src/lib/components/Channel/Stream/StreamContainer.svelte
@@ -30,7 +30,8 @@
 		channel: any,
 		channels: any = [],
 		isHostOrGuest: boolean = false,
-		viewers: any[] = []
+		viewers: any[] = [],
+		channelId: string
 
 	let isScrollable = false
 	$: isLive =
@@ -54,7 +55,7 @@
 				if (channels?.length && channels[channels.length - 2]?._id == id) {
 					dispatch('loadMore')
 				}
-
+				channelId = channel._id
 				goto(`${id}?${$page.url?.searchParams}`, {
 					keepFocus: true,
 					replaceState: true,
@@ -154,14 +155,14 @@
 							<IconChatDrawerChevronClose />
 						</label>
 					</div>
-					{#if channel && nextchannel?._id === parseInt($page.params.channelId)}
+					{#if channel && nextchannel?._id === parseInt(channelId)}
 						<VideoGrid bind:channel />
 					{/if}
 				</div>
 			</div>
 		{/each}
 	</div>
 	<div class="absolute lg:bottom-0 bottom-10 m-3 w-full items-center justify-center flex">
-		<StreamControls bind:isHostOrGuest bind:channel bind:isScrollable bind:viewers />
+		<StreamControls bind:isHostOrGuest bind:channel bind:isScrollable bind:viewers bind:channelId />
 	</div>
 </div>
diff --git a/src/lib/components/Channel/Stream/StreamControls.svelte b/src/lib/components/Channel/Stream/StreamControls.svelte
@@ -25,7 +25,8 @@
 	export let isHostOrGuest: boolean = false,
 		channel: any,
 		isScrollable: boolean = false,
-		viewers: any[] = []
+		viewers: any[] = [],
+		channelId: string
 
 	let selectedUser = 0,
 		rtmps_modal: any = null,
@@ -41,7 +42,7 @@
 	)
 
 	$: isChannelSocketConnected =
-		$channel_connection === `open-${$page.params.channelId}` && $page.data.user?.userId
+		$channel_connection === `open-${channelId}` && $page.data.user?.userId
 	$: videoItemIsActive = channel.videoItems.some(
 		(video: any) => video._id === $page.data.user?.userId
 	)
@@ -72,17 +73,17 @@
 
 	const startWebrtcStream = async (trackType: string) => {
 		let liveInput = await getLiveInput({
-			channelId: parseInt($page.params.channelId),
+			channelId: parseInt(channelId),
 			trackType
 		})
 		if (!liveInput) {
 			liveInput = await createLiveInput({
-				channelId: `${$page.params.channelId}`,
+				channelId: `${channelId}`,
 				userId: $page.data.user?.userId,
 				trackType,
 				liveInput: {
 					meta: {
-						name: `${$page.params.channelId}-${$page.data.user.userId}-webrtc-${trackType}`
+						name: `${channelId}-${$page.data.user.userId}-webrtc-${trackType}`
 					},
 					recording: { mode: 'off' }
 				}
@@ -119,12 +120,12 @@
 	const refreshStreamKey = async () => {
 		rtmps = null
 		rtmps = await createLiveInput({
-			channelId: `${$page.params.channelId}`,
+			channelId: `${channelId}`,
 			userId: $page.data.user?.userId,
 			trackType: 'rtmps',
 			liveInput: {
 				meta: {
-					name: `${$page.params.channelId}-${$page.data.user.userId}-rtmps`
+					name: `${channelId}-${$page.data.user.userId}-rtmps`
 				},
 				recording: { mode: 'automatic' }
 			}
@@ -134,7 +135,7 @@
 	const showStreamKeyModal = async () => {
 		rtmps_modal.showModal()
 		rtmps = await getLiveInput({
-			channelId: parseInt($page.params.channelId),
+			channelId: parseInt(channelId),
 			trackType: 'rtmps'
 		})
 		if (!rtmps) {