Merge pull request #765 from CodeCrowCorp/dev

Fix: Restream UI changes

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

@@ -0,0 +1,225 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import { get, put, del } from '$lib/api.js'
+	import { page } from '$app/stores'
+	import { isValidURL } from '$lib/utils'
+	import IconRestream from '$lib/assets/icons/channel/IconRestream.svelte'
+
+	$: auth = {
+		userId: $page.data.user?.userId,
+		token: $page.data.user?.token
+	}
+	let urlList: any = []
+	let payload = {
+		url: '',
+		streamKey: ''
+	}
+	let loading = false
+	let add_output_modal: any
+	let confirm_modal = false
+	let showAddModal = false
+	let selected = ''
+	let touched = false
+	let restream_drawer = false
+
+	const addNew = async () => {
+		loading = true
+		await await put('output', payload, auth)
+		loading = false
+		await getAll()
+		showAddModal = false
+		touched = false
+		payload = {
+			url: '',
+			streamKey: ''
+		}
+	}
+
+	const remove = async () => {
+		loading = true
+		await del(`/output?outputId=${selected}`, auth)
+		await getAll()
+		loading = false
+		confirm_modal = false
+	}
+
+	const getAll = async () => {
+		loading = true
+		urlList = await get('outputs', auth)
+		loading = false
+	}
+
+	const confirm = (id: string) => {
+		selected = id
+		confirm_modal = true
+	}
+
+	const onBlur = () => {
+		touched = true
+	}
+
+	const overlayClick = (evt: any) => {
+		const elt = evt?.target
+		if (elt?.classList?.contains('drawer-overlay')) restream_drawer = false
+	}
+
+	onMount(() => {
+		getAll()
+	})
+	
+	$: cloudFareUrl = payload.url.includes('cloudflare') 
+	$: invalidUrl = !isValidURL(payload.url)
+
+	$: disbaled = loading || 
+	!payload.url || 
+	!payload.streamKey ||
+	invalidUrl ||
+	cloudFareUrl
+
+</script>
+
+<div class="drawer drawer-end">
+	<input id="restream-drawer" type="checkbox" class="drawer-toggle" />
+	<div class="drawer-content">
+		<!-- Page content here -->
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<label
+			for="restream-drawer"
+			class="btn text-white border-none tooltip font-normal normal-case items-center flex {restream_drawer
+				? 'btn-primary'
+				: 'btn-neutral'}"
+			data-tip="Restream"
+			on:click={() => {
+				restream_drawer = !restream_drawer
+			}}>
+			<IconRestream />
+		</label>
+	</div>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div class="drawer-side z-50" on:click={overlayClick}>
+		<label id="overlay" for="restream-drawer" aria-label="close sidebar" class="drawer-overlay" />
+		<ul class="relative menu p-4 w-96 h-[calc(100%-40px)] overflow-auto bg-base-200 text-base-content m-4 rounded-lg">
+		<p class="p-3 pt-0 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2 flex justify-between items-center">
+			Restream Urls
+			<button
+				class="btn btn-primary btn-sm"
+				disabled={urlList.length > 9}
+				on:click={() => {
+					showAddModal = true
+					touched = false
+				}}>
+				Add url
+			</button>
+		</p>	
+
+		<div class="flex flex-col">
+			{#each urlList as item}
+				<div class="bg-base-100 p-4 my-1 rounded flex justify-between items-center">
+					<div class="flex-1">
+						<div class="">{item.url}</div>
+						<div>
+							<input
+								value="dummyvalues"
+								type="password"
+								placeholder="Type here"
+								class="bg-transparent"
+								disabled 
+							/>
+						</div>
+					</div>
+					<button on:click={() => confirm(item._id)} class="btn btn-sm btn-circle btn-ghost">
+						✕
+					</button>
+				</div>
+			{/each}
+		</div>
+
+		<dialog class={`modal ${confirm_modal && 'modal-open'}`}>
+			<form on:keydown={(event) => event.key != 'Enter'} method="dialog" class="modal-box">
+				<h3 class="font-bold text-lg">Delete restream url</h3>
+				<p class="py-4">
+					{loading ? 'Please wait...' : 'Are you sure you want to delete this Stream Url?'}
+				</p>
+				<div class="modal-action">
+					{#if !loading}
+						<button
+							class="btn"
+							disabled={loading}
+							on:click={() => {
+								confirm_modal = false
+							}}>Cancel</button>
+						<button disabled={loading} class="btn btn-primary" on:click={remove}>Yes</button>
+					{/if}
+				</div>
+			</form>
+		</dialog>
+
+		<dialog bind:this={add_output_modal} class={`modal ${showAddModal && 'modal-open'}`}>
+			<div class="modal-box">
+				<h3 class="font-bold text-lg">Add new stream</h3>
+
+
+				<div class="form-control w-full pt-4">
+					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<label class="label">
+						<span class="label-text">Server</span>
+					</label>
+					<input
+						bind:value={payload.url}
+						type="text"
+						placeholder="Enter server url"
+						class="input input-bordered w-full max-w-xs input-primary" 
+						on:blur={onBlur}
+					/>
+					{#if touched && invalidUrl}
+						<div class="text-error text-sm mt-2">Please enter a valid URL</div>
+					{/if}
+					{#if touched && !invalidUrl && cloudFareUrl}
+						<div class="text-error text-sm mt-2">Cloudfare urls not allowed</div>
+					{/if}
+					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<label class="label mt-5">
+						<span class="label-text">Stream Key</span>
+					</label>
+					<input
+						bind:value={payload.streamKey}
+						type="text"
+						placeholder="Enter stream key"
+						class="input input-bordered w-full max-w-xs input-primary" />
+				</div>
+
+				<div class="modal-action">
+					<button
+						class="btn"
+						on:click={() => {
+							showAddModal = false
+							payload = {
+								url: '',
+								streamKey: ''
+							}
+						}}>Cancel</button>
+					<button
+						disabled={disbaled}
+						class="btn btn-primary"
+						on:click={addNew}>
+						Save
+					</button>
+				</div>
+			</div>
+		</dialog>
+
+		<div 
+
+			class="p-4 absolute left-0 bottom-0 w-full text-center cursor-pointer">
+			<button
+				type="button"
+				class="btn btn-neutral text-white grow w-full"
+				on:click={()=> {
+					document.getElementById("overlay")?.click()
+				}}
+			>Cancel</button>
+		</div>
+		</ul>
+	</div>
+</div>
+

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import IconShare from '$lib/assets/icons/channel/IconShare.svelte'
 	import IconShareScreen from '$lib/assets/icons/channel/IconShareScreen.svelte'
 	import IconShareWebcam from '$lib/assets/icons/channel/IconShareWebcam.svelte'
 	import IconShareAudio from '$lib/assets/icons/channel/IconShareAudio.svelte'
@@ -20,7 +19,7 @@
 		is_feature_apps_enabled,
 		is_feature_restream_enabled
 	} from '$lib/stores/remoteConfigStore'
-	import IconRestream from '$lib/assets/icons/channel/IconRestream.svelte'
+	import DrawerRestream from '$lib/components/Channel/Chat/DrawerRestream.svelte'
 
 	export let isHostOrGuest: boolean = false,
 		channel: any,
@@ -331,6 +330,7 @@
 			subs()
 		})
 	})
+
 </script>
 
 <div class="flex flex-col sm:flex-row gap-4">
@@ -399,22 +399,7 @@
 		</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>
+			<DrawerRestream />
 		{/if}
 	</div>
 </div>
@@ -425,4 +410,5 @@
 	bind:checked={isScrollable}
 	on:click={() => {
 		isScrollable = !isScrollable
-	}} />
+	}} 
+/>

src/lib/components/Profile/DrawerEditProfile.svelte

@@ -4,7 +4,8 @@
 	import DrawerAddCategory from '$lib/components/Browse/DrawerAddCategory.svelte'
 	import IconLink from '$lib/assets/icons/IconLink.svelte'
 	import { category_list } from '$lib/stores/channelStore'
-	import { createEffect, objectMonitor } from '$lib/utils'
+	import { createEffect, objectMonitor, isValidURL } from '$lib/utils'
+	
 
 	export let showDrawer: boolean
 	export let profile: any
@@ -31,11 +32,6 @@
 
 	let isLastFieldValid = false
 
-	const isValidURL = (url: string) => {
-		const urlPattern = /^https?:\/\/\S+$/i
-		return urlPattern.test(url)
-	}
-
 	$: {
 		const lastField = inputFields[inputFields.length - 1]
 		isLastFieldValid = isValidURL(lastField)

src/lib/stores/channelStore.ts

@@ -10,3 +10,7 @@ export const category_assets: Writable<{
 export const is_chat_drawer_open: Writable<boolean> = writable(false)
 export const is_chat_drawer_destroy: Writable<boolean> = writable(false)
 export const was_chat_drawer_closed: Writable<boolean> = writable(false)
+
+export const is_restream_drawer_open: Writable<boolean> = writable(false)
+export const is_restream_drawer_destroy: Writable<boolean> = writable(false)
+export const was_restream_drawer_closed: Writable<boolean> = writable(false)

src/lib/utils.ts

@@ -344,4 +344,19 @@ export const objectMonitor = (object:any) => {
 	return (currentState:any) => {
 		return JSON.stringify(object) !== JSON.stringify(currentState)
 	}
+}
+
+export const isValidURL = (url: string) => {
+	// const urlPattern = /^https?:\/\/\S+$/i
+	// return urlPattern.test(url)
+	const pattern = new RegExp(
+		'^(https?:\\/\\/)?' + // protocol
+		  '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+		  '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+		  '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+		  '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+		  '(\\#[-a-z\\d_]*)?$', // fragment locator
+		'i'
+	);
+	return pattern.test(url);
 }

src/lib/websocket.ts

@@ -39,18 +39,21 @@ const emitChannelUpdate = ({
 const emitChannelSubscribeByUser = ({
 	channelSocket,
 	channelId,
+	hostId,
 	userId,
 	username
 }: {
 	channelSocket: WebSocket
 	channelId: string
+	hostId: string
 	userId: string
 	username: string
 }) => {
 	channelSocket.send(
 		JSON.stringify({
 			eventName: `channel-subscribe`,
 			channel: channelId,
+			hostId,
 			user: { userId, username }
 		})
 	)

src/routes/channel/[channelId]/+page.svelte

@@ -107,6 +107,7 @@
 			emitChannelSubscribeByUser({
 				channelSocket: chan.socket,
 				channelId: $page.params.channelId,
+				hostId: chan.user,
 				userId: $page.data.user?.userId,
 				username: $page.data.user?.user?.username
 			})