feat: merge feat/wio-v3-anonymous into feat/wio-v2-follow

src/components/presence-mouse/index.ts

@@ -12,7 +12,7 @@ export class MousePointers extends BaseComponent {
   private divWrapper: HTMLElement;
   private presences: Map<string, ParticipantMouse>;
   private animateFrame: number;
-  private goToMouseCallback: PresenceMouseProps['onGoToPin'];
+  private goToMouseCallback: PresenceMouseProps['onGoToPresence'];
   private following: string;
   private isPrivate: boolean;
 
@@ -32,7 +32,7 @@ export class MousePointers extends BaseComponent {
     this.divWrapper = this.renderDivWrapper();
     this.animateFrame = requestAnimationFrame(this.animate);
 
-    this.goToMouseCallback = options?.onGoToPin;
+    this.goToMouseCallback = options?.onGoToPresence;
   }
 
   private get textColorValues(): number[] {

src/components/presence-mouse/types.ts

@@ -8,5 +8,5 @@ export interface ParticipantMouse extends Participant {
 }
 
 export interface PresenceMouseProps {
-  onGoToPin?: (position: { x: number; y: number }) => void;
+  onGoToPresence?: (position: { x: number; y: number }) => void;
 }

src/components/who-is-online/index.ts

@@ -2,12 +2,12 @@ import { isEqual } from 'lodash';
 
 import { RealtimeEvent } from '../../common/types/events.types';
 import { Logger } from '../../common/utils';
-import { AblyParticipant, ParticipantDataInput } from '../../services/realtime/ably/types';
+import { AblyParticipant } from '../../services/realtime/ably/types';
 import { WhoIsOnline as WhoIsOnlineElement } from '../../web-components';
 import { BaseComponent } from '../base';
 import { ComponentNames } from '../types';
 
-import { WhoIsOnlinePosition, Position, Participant, Data } from './types';
+import { WhoIsOnlinePosition, Position, Participant } from './types';
 
 export class WhoIsOnline extends BaseComponent {
   public name: ComponentNames;
@@ -110,12 +110,11 @@ export class WhoIsOnline extends BaseComponent {
     });
 
     const participants = updatedParticipants.map(({ data }) => {
-      const { slotIndex, id, name, avatar, activeComponents } = data as Data;
+      const { slotIndex, id, name, avatar, activeComponents } = data as Participant;
       const { color } = this.realtime.getSlotColor(slotIndex);
       const isLocal = this.localParticipant.id === id;
       const joinedPresence = activeComponents.some((component) => component.includes('presence'));
-      // eslint-disable-next-line no-unused-expressions
-      isLocal && this.setLocalData(!joinedPresence, color, slotIndex);
+      this.setLocalData(isLocal, !joinedPresence, color, slotIndex);
 
       return { name, id, slotIndex, color, isLocal, joinedPresence, avatar };
     });
@@ -126,7 +125,9 @@ export class WhoIsOnline extends BaseComponent {
     this.element.participants = this.participants;
   };
 
-  private setLocalData = (disable: boolean, color: string, slotIndex: number) => {
+  private setLocalData = (local: boolean, disable: boolean, color: string, slotIndex: number) => {
+    if (!local) return;
+
     this.element.disableDropdown = disable;
     this.element.localParticipantData = { color, slotIndex, id: this.localParticipant.id };
   };

src/components/who-is-online/types.ts

@@ -11,16 +11,8 @@ export enum Position {
 export interface Participant extends GeneralParticipant {
   slotIndex: number;
   isLocal?: boolean;
-  joinedPresence?: boolean | undefined;
+  joinedPresence?: boolean;
   isPrivate?: boolean;
 }
 
 export type WhoIsOnlinePosition = Position | `${Position}` | string;
-
-export type Data = {
-  slotIndex: number;
-  id: string;
-  name: string;
-  activeComponents: string[];
-  avatar: Avatar;
-};