only show presence if websocket connection succceeds

This commit is contained in:
Ruben Fiszel
2023-05-31 15:29:20 +02:00
parent e9fe595de4
commit 609fdcd906
@@ -16,6 +16,7 @@
let awareness: Awareness | undefined = undefined
let wsProvider: WebsocketProvider | undefined = undefined
let connected = false
function connectWorkspace(workspace: string) {
const ydoc = new Y.Doc()
wsProvider = new WebsocketProvider(
@@ -23,6 +24,10 @@
workspace,
ydoc
)
wsProvider.on('sync', (isSynced: boolean) => {
connected = true
})
awareness = wsProvider.awareness
awareness?.setLocalState({
@@ -80,41 +85,43 @@
}
</script>
<Menu placement="bottom-start">
<button
slot="trigger"
type="button"
class={classNames(
'group w-full flex items-center text-white hover:bg-gray-50 hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300 px-2 py-2 text-sm font-medium rounded-md h-8 '
)}
>
<div class="center-center mr-2">
<Users size={16} />
</div>
{#if connected}
<Menu placement="bottom-start">
<button
slot="trigger"
type="button"
class={classNames(
'group w-full flex items-center text-white hover:bg-gray-50 hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300 px-2 py-2 text-sm font-medium rounded-md h-8 '
)}
>
<div class="center-center mr-2">
<Users size={16} />
</div>
{#if !isCollapsed}
<span class={classNames('whitespace-pre truncate')}>Live</span>
{/if}
</button>
{#if !isCollapsed}
<span class={classNames('whitespace-pre truncate')}>Live</span>
{/if}
</button>
<div class="divide-y divide-gray-100" role="none">
<div class="py-1 flex flex-col gap-y-1">
{#each Object.entries($awarenessStore ?? {}) as [user, url]}
<div class="inline-flex gap-2 px-2 items-center">
<span
class="inline-flex h-6 w-6 px-1 items-center justify-center rounded-full ring-2 ring-white bg-gray-600"
title={user}
>
<span class="text-sm font-medium leading-none text-white"
>{user.substring(0, 2).toLocaleUpperCase()}</span
<div class="divide-y divide-gray-100" role="none">
<div class="py-1 flex flex-col gap-y-1">
{#each Object.entries($awarenessStore ?? {}) as [user, url]}
<div class="inline-flex gap-2 px-2 items-center">
<span
class="inline-flex h-6 w-6 px-1 items-center justify-center rounded-full ring-2 ring-white bg-gray-600"
title={user}
>
</span>
<div class="flex flex-col">
<span class="text-sm text-gray-900 truncate">{user}</span>
<span class="text-xs text-gray-500 truncate">{showActivity(url)}</span>
<span class="text-sm font-medium leading-none text-white"
>{user.substring(0, 2).toLocaleUpperCase()}</span
>
</span>
<div class="flex flex-col">
<span class="text-sm text-gray-900 truncate">{user}</span>
<span class="text-xs text-gray-500 truncate">{showActivity(url)}</span>
</div>
</div>
</div>
{/each}
{/each}
</div>
</div>
</div>
</Menu>
</Menu>
{/if}