Fix: vods showing in wrong channels

package.json

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

src/lib/components/Channel/Stream/DialogVod.svelte

@@ -4,7 +4,7 @@
 	import { is_vod_modal_open } from '$lib/stores/channelStore'
 	import { timeSince } from '$lib/utils'
 
-	export let vod: any
+	export let vod: any, isHost: boolean
 
 	$: vodIsVisible = vod?.isVisible
 
@@ -34,24 +34,26 @@
 		}}>
 		<form method="dialog">
 			<div class="flex absolute right-2 top-2">
-				<div class="dropdown-menu dropdown dropdown-end" tabindex="1">
-					<button class="btn btn-sm btn-circle btn-ghost">
-						<IconMore />
-					</button>
-					<ul
-						tabindex="1"
-						class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52 z-10">
-						<li>
-							<a on:click={toggleVodVisibility}
-								><input
-									type="checkbox"
-									class="toggle toggle-primary toggle-xs"
-									bind:checked={vodIsVisible} />
-								Visible to viewers</a>
-						</li>
-						<!-- <li><a>Download</a></li> -->
-					</ul>
-				</div>
+				{#if isHost}
+					<div class="dropdown-menu dropdown dropdown-end" tabindex="1">
+						<button class="btn btn-sm btn-circle btn-ghost">
+							<IconMore />
+						</button>
+						<ul
+							tabindex="1"
+							class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52 z-10">
+							<li>
+								<a on:click={toggleVodVisibility}
+									><input
+										type="checkbox"
+										class="toggle toggle-primary toggle-xs"
+										bind:checked={vodIsVisible} />
+									Visible to viewers</a>
+							</li>
+							<!-- <li><a>Download</a></li> -->
+						</ul>
+					</div>
+				{/if}
 				<button
 					class="btn btn-sm btn-circle btn-ghost"
 					on:click={() => {

src/lib/components/Channel/Stream/StreamControls.svelte

@@ -21,6 +21,7 @@
 	import IconRefresh from '$lib/assets/icons/IconRefresh.svelte'
 	import IconCopy from '$lib/assets/icons/IconCopy.svelte'
 	import { copyToClipboard, updateVideoItems } from '$lib/utils'
+	import { env } from '$env/dynamic/public'
 
 	export let isHostOrGuest: boolean = false,
 		channel: any,
@@ -82,7 +83,7 @@
 				trackType,
 				liveInput: {
 					meta: {
-						name: $page.params.channelId
+						name: `${env.PUBLIC_ENV}-${$page.params.channelId}`
 					},
 					recording: { mode: 'off' }
 				}
@@ -124,7 +125,7 @@
 			trackType: 'rtmps',
 			liveInput: {
 				meta: {
-					name: $page.params.channelId
+					name: `${env.PUBLIC_ENV}-${$page.params.channelId}`
 				},
 				recording: { mode: 'automatic' }
 			}

src/lib/components/Channel/Stream/VodList.svelte

@@ -11,6 +11,7 @@
 	let vods: any = [],
 		selectedVod: any
 
+	// Update the vod list with the selected vod
 	$: {
 		if (selectedVod) {
 			vods = vods.map((vod: any) => (vod.id === selectedVod.id ? selectedVod : vod))
@@ -20,7 +21,7 @@
 	onMount(async () => {
 		vods = await get(`vods?channelId=${channelId}`)
 		if (hostUserId !== $page.data.user?.userId) {
-			vods = vods.filter((vod: any) => !vod.isVisible)
+			vods = vods.filter((vod: any) => vod.isVisible)
 		}
 	})
 </script>
@@ -53,5 +54,5 @@
 			</div>
 		{/each}
 	</div>
-	<DialogVod bind:vod={selectedVod} />
+	<DialogVod bind:vod={selectedVod} isHost={hostUserId === $page.data.user?.userId} />
 {/if}