Skip to content

Commit

Permalink
Merge pull request #765 from CodeCrowCorp/dev
Browse files Browse the repository at this point in the history
Fix: Restream UI changes
  • Loading branch information
gagansuie authored Oct 29, 2023
2 parents cd5841d + e663e8d commit 3d7d5f0
Show file tree
Hide file tree
Showing 7 changed files with 255 additions and 25 deletions.
225 changes: 225 additions & 0 deletions src/lib/components/Channel/Chat/DrawerRestream.svelte
Original file line number Diff line number Diff line change
@@ -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>

24 changes: 5 additions & 19 deletions src/lib/components/Channel/Stream/StreamControls.svelte
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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,
Expand Down Expand Up @@ -331,6 +330,7 @@
subs()
})
})
</script>

<div class="flex flex-col sm:flex-row gap-4">
Expand Down Expand Up @@ -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>
Expand All @@ -425,4 +410,5 @@
bind:checked={isScrollable}
on:click={() => {
isScrollable = !isScrollable
}} />
}}
/>
8 changes: 2 additions & 6 deletions src/lib/components/Profile/DrawerEditProfile.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Expand Down
4 changes: 4 additions & 0 deletions src/lib/stores/channelStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
15 changes: 15 additions & 0 deletions src/lib/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
3 changes: 3 additions & 0 deletions src/lib/websocket.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
})
)
Expand Down
1 change: 1 addition & 0 deletions src/routes/channel/[channelId]/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
Expand Down

0 comments on commit 3d7d5f0

Please sign in to comment.