Update demo

demo/app/components/cursors.ts

@@ -1,4 +1,4 @@
-import { Space } from '../../../src';
+import { Space } from '../../../src/index';
 import { queryDataId } from '../utils/dom';
 import type { MemberColor } from '../utils/colors';
 
@@ -51,18 +51,18 @@ const attachCursors = (space: Space, slideId) => {
   const cursorContainer = queryDataId(slideContainer, 'slide-cursor-container');
   cursorContainer.innerHTML = '';
 
-  const self = space.getSelf();
+  const self = space.members.getSelf();
 
   space.cursors.subscribe('cursorsUpdate', (update) => {
     let cursorNode: HTMLElement = slideContainer.querySelector(`#cursor-${update.connectionId}`);
 
-    const membersOnSlide = space.getMembers().filter((member) => member.location?.slide === slideId);
+    const membersOnSlide = space.members.getAll().filter((member) => member.location?.slide === slideId);
     const member = membersOnSlide.find((member) => member.connectionId === update.connectionId);
 
     if (!member || !self.connectionId || self.connectionId === update.connectionId) return;
 
     if (!(cursorNode instanceof HTMLElement)) {
-      cursorNode = createCursor(update.connectionId, member.profileData);
+      cursorNode = createCursor(update.connectionId, member.profileData as { name: string; color: MemberColor });
       cursorContainer.appendChild(cursorNode);
     }
 

demo/app/components/render-slide-preview-menu.ts

@@ -81,7 +81,7 @@ const renderSlidePreviewMenu = (space: Space) => {
   const slidePreviewMenuContainer = document.querySelector('#slide-left-preview-list');
   slidePreviewMenuContainer.innerHTML = '';
 
-  const members = space.getMembers();
+  const members = space.members.getAll();
   const selectedSlide = slideData.find((data) => data.selected);
 
   slideData.forEach((slide, i) => {

demo/app/components/render-slide.ts

@@ -138,7 +138,7 @@ const renderSlide = (slideContainer: HTMLElement, slideData: SlideData, members:
 
 const renderSelectedSlide = (space: Space) => {
   const selectedSlide = slideData.find((data) => data.selected);
-  const members = space.getMembers();
+  const members = space.members.getAll();
   const presentMembers = members.filter((member) => member.location && member.location.slide === selectedSlide.id);
   const selectedSlideContainer = document.querySelector('#slide-selected') as HTMLElement;
   const wrapper = queryDataId(selectedSlideContainer, 'slide-wrapper');

demo/app/script.ts

@@ -6,8 +6,7 @@ import { getRandomName } from './utils/fake-names';
 import { getSpaceNameFromUrl } from './utils/url';
 import Spaces from '../../src/Spaces';
 import { renderAvatars, renderSelfAvatar } from './components/avatar-stack';
-import { MEMBERS_UPDATE } from '../../src/utilities/Constants';
-import type { SpaceMember } from '../../src/Space';
+import type { SpaceMember } from '../../src/index';
 import { getRandomColor } from './utils/colors';
 import { slideData } from './data/slide-data';
 import { IS_SELECTED } from './data/default-slide-data';
@@ -42,10 +41,6 @@ const space = await spaces.get(getSpaceNameFromUrl(), {
   offlineTimeout: 10_000,
 });
 
-space.subscribe(MEMBERS_UPDATE, (members) => {
-  renderAvatars(members.filter(memberIsNotSelf));
-});
-
 const initialMembers = await space.enter({ name: selfName, color: selfColor });
 space.locations.set({ slide: currentSlide().id, element: null });
 
@@ -56,7 +51,7 @@ renderSelectedSlide(space);
 renderComments();
 let detachCursors = attachCursors(space, currentSlide().id);
 
-space.locations.subscribe('locationUpdate', ({ previousLocation, currentLocation }) => {
+space.locations.subscribe('update', ({ previousLocation, currentLocation }) => {
   renderSlidePreviewMenu(space);
   renderSelectedSlide(space);
 
@@ -65,7 +60,7 @@ space.locations.subscribe('locationUpdate', ({ previousLocation, currentLocation
   detachCursors = attachCursors(space, currentSlide().id);
 });
 
-space.subscribe('membersUpdate', (members) => {
+space.subscribe('update', ({ members }) => {
   renderAvatars(members.filter(memberIsNotSelf));
 });