Miscellaneous fixes

hyperbeam · Nov 21, 2022 · 28af925 · 28af925
1 parent a4ea865
commit 28af925
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 26 deletions.
diff --git a/client/src/assets/scss/main.scss b/client/src/assets/scss/main.scss
@@ -1,10 1,18 @@
 @use "reset";
 @use "variables";
 
 html,
 body,
 #root {
  height: 100%;
  width: 100%;
 }
 
 body {
  background-color: variables.$color-background;
  color: #fff;
  font: 1rem "Lato", sans-serif;
  overflow-x: hidden;
 }
 
 button {

diff --git a/client/src/components/Avatar.svelte b/client/src/components/Avatar.svelte
@@ -2,9 2,10 @@
  export let src: string;
  export let alt: string;
  export let borderStyle: "none" | "dashed" | "solid" = "none";
  export let color: string = "#000000";
 </script>
 
-<div class={`avatar ${borderStyle}`} on:click on:keypress>
 <div class={`avatar ${borderStyle}`} style:--borderColor={color} on:click on:keypress>
  <img {src} {alt} />
 </div>
 
@@ -25,12 26,12 @@
  }
 
  .dashed {
- border: 2px dashed variables.$color-primary;
  border: 2px dashed var(--borderColor, variables.$color-primary);
  animation: pulse 1s 1;
  }
 
  .solid {
- border: 2px solid variables.$color-primary;
  border: 2px solid var(--borderColor, variables.$color-primary);
  }
 
  .avatar img {

diff --git a/client/src/components/Members.svelte b/client/src/components/Members.svelte
@@ -39,9 39,13 @@
 
 <div class="members">
  {#each $members as member}
- <Tooltip text={member.name   ($currentUser && $currentUser.id === member.id ? "(You)" : "")}>
  <Tooltip text={member.name   ($currentUser && $currentUser.id === member.id ? " (You)" : "")}>
  <div class="member" on:click={() => setControl(member)} on:keypress={(e) => handleAvatarKeypress(e, member)}>
- <Avatar src={member.avatarUrl} alt={member.name} borderStyle={getBorderStyle(member.control)} />
  <Avatar
  src={member.avatarUrl}
  alt={member.name}
  borderStyle={getBorderStyle(member.control)}
  color={member.color} />
  </div>
  </Tooltip>
  {/each}

diff --git a/client/src/pages/Room.svelte b/client/src/pages/Room.svelte
@@ -6,7 6,7 @@
  import Loading from "../components/Loading.svelte";
  import Toolbar from "../components/Toolbar.svelte";
  import { connect } from "../scripts/api";
- import { currentUser, members, room, trackedCursor } from "../store";
  import { currentUser, members, room } from "../store";
 
  const { addNotification } = getNotificationsContext();
 
@@ -23,15 23,6 @@
  }
 
  let vmNode: HTMLDivElement;
- let showNativeCursor = false;
-
- function onNativeCursorMove(e: MouseEvent) {
- if (vmNode) {
- const rect = vmNode.getBoundingClientRect();
- showNativeCursor =
- e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
- }
- }
 
  /** Check if authentification was successful after clicking sign in button */
  function wasAuthSuccessful() {
@@ -60,20 51,11 @@
  <Loading bind:showLoading />
 {:then}
  {#if $room && $room.state.embedUrl}
- <div class="room" on:mousemove={onNativeCursorMove} style:--isFullscreen={isFullscreen ? 1 : 0}>
  <div class="room" style:--isFullscreen={isFullscreen ? 1 : 0} class:isFullscreen>
  <Hyperbeam embedUrl={$room.state.embedUrl} bind:vmNode />
  {#if vmNode}
  {#each $members as member}
- {#if $currentUser && member.id === $currentUser.id}
- <Cursor
- displayed={!showNativeCursor}
- left={$trackedCursor.x}
- top={$trackedCursor.y}
- {vmNode}
- text={member.name}
- color={member.color}
- interpolate={false} />
- {:else if member.cursor}
  {#if member.cursor && $currentUser && member.id !== $currentUser.id}
  <Cursor left={member.cursor.x} top={member.cursor.y} {vmNode} text={member.name} color={member.color} />
  {/if}
  {/each}
@@ -90,6 72,10 @@
  height: 100%;
  }
 
  :global(body):has(.isFullscreen) {
  overflow: hidden;
  }
 
  :global(.hyperbeam) {
  position: absolute;
  inset: 0;