added: event management and first emitted event 'status'

Author: urbansky

index.ts

@@ -2,6 +2,8 @@ export { default as HxMeeting } from './src/components/HxMeeting.vue'
 export { default as HxToolbar } from './src/components/toolbar/HxToolbar.vue'
 export { default as HxSelectButton } from './src/components/toolbar/HxSelectButton.vue'
 
+export type { HxMeetingStatus } from './src/types/conference.ts'
+
 // export { default as HxRoundButton } from './src/components/HxRoundButton.vue'
 // export type { HxRoundButtonProps } from './src/components/HxRoundButton.vue'
 

src/App.vue

@@ -6,13 +6,19 @@
 
 <script setup lang="ts">
 import type {HxMeetingProps} from "./components/HxMeeting.vue";
+import type {HxMeetingStatus} from "@/types/conference.ts";
 const params = new URLSearchParams(window.location.search)
 
 const meetingProps: HxMeetingProps = {
   livekitUrl: params.get("livekitUrl") || import.meta.env.VITE_LIVEKIT_URL,
   livekitToken: params.get("livekitToken")  || import.meta.env.VITE_LIVEKIT_TOKEN,
   extensions: {
     'sidebar.info.body': "Hallo"
+  },
+  events: {
+    'status': (status: HxMeetingStatus): void => {
+      console.log('Listener status changed', status)
+    }
   }
 }
 

src/components/HxMeeting.vue

@@ -56,36 +56,37 @@ import {
 import {useClickSidebarButton, useModal} from "../composable/ui.ts";
 import {useThrottleFn} from "@vueuse/core";
 import {defineShortcuts2 as defineShortcuts} from "../composable/nuxtui/defineShortcuts2.ts";
-import {type ComponentDescriptor, useExtensions} from "../composable/useExtensions.ts";
+import {type HxComponentDescriptor, useExtensions} from "../composable/useExtensions.ts";
+import {type HxHandler, type HxEvent, useEvents} from "../composable/useEvents.ts";
 
 const { hideSidebar } = useUIState();
 const {closeAllModals} = useModal()
 
 export interface HxMeetingProps {
   livekitUrl: string,
   livekitToken: string,
-  extensions?: Record<string, string | Ref | ComponentDescriptor>;
+  extensions?: Record<string, string | Ref | HxComponentDescriptor>;
+  events?: Partial<Record<HxEvent, HxHandler>>;
 }
-
 const props = defineProps<HxMeetingProps>()
 
-// ----------------------------------------------------------
-// Extensions
-// ----------------------------------------------------------
-
+// ---------------------------------------
+// Register extensions
+// ---------------------------------------
 const { set } = useExtensions();
-
 watch(() => props.extensions, (extensions) => {
-      console.log("extensions changed", extensions);
-      if (!extensions) return;
-      for (const [name, item] of Object.entries(extensions)) set(name, item);
-    },
-    { immediate: true, deep: true }
-);
-
-// ----------------------------------------------------------
-// ----------------------------------------------------------
-// ----------------------------------------------------------
+  if (!extensions) return;
+  for (const [name, item] of Object.entries(extensions)) set(name, item);
+}, { immediate: true, deep: true });
+
+// ---------------------------------------
+// Register event listener
+// ---------------------------------------
+const { on } = useEvents();
+watch(() => props.events, (events) => {
+  if (!events) return;
+  for (const [name, item] of Object.entries(events)) on(name as HxEvent, item);
+}, { immediate: true, deep: true });
 
 onBeforeMount(() => {
   provideLivekitConfig(

src/components/sidebar/HxInfoPanel.vue

@@ -5,8 +5,8 @@
         <span v-if="bodyExtension && (isRef(bodyExtension) || typeof bodyExtension === 'string')">{{ bodyExtension }}</span>
         <component
             v-else-if="bodyExtension"
-            :is="(bodyExtension as ComponentDescriptor).component"
-            v-bind="(bodyExtension as ComponentDescriptor).props"
+            :is="(bodyExtension as HxComponentDescriptor).component"
+            v-bind="(bodyExtension as HxComponentDescriptor).props"
         />
 
       </div>
@@ -41,7 +41,7 @@ import UTooltip from "@nuxt/ui/components/Tooltip.vue";
 import UButton from "@nuxt/ui/components/Button.vue";
 import {useUIState} from "../../composable/conferenceState.ts";
 import HxPanel from "./HxPanel.vue";
-import {type ComponentDescriptor, useExtensions} from '../../composable/useExtensions.ts';
+import {type HxComponentDescriptor, useExtensions} from '../../composable/useExtensions.ts';
 const { sidebarResizing } = useUIState();
 
 const { get } = useExtensions();

src/components/stage/HxStagePanel.vue

@@ -10,7 +10,7 @@
         :layoutStyles="getVideoPositionStyle(idx)"
     />
     <HxVideo
-        v-if="roomConnectStatus === ''"
+        v-if="roomConnectStatus === 'initialising'"
         :idx="0"
         :participant="fakeParticipant"
         :key="0"
@@ -73,7 +73,7 @@ const getVideoPositionStyle = (index: number): LayoutStyleItem => {
   // This function calculates the position of each video in the conference canvas
   // Will be called everytime canvasDim or participants change, like a computed property
 
-  const total = roomConnectStatus.value === '' ? 1 : participants.value.length;
+  const total = roomConnectStatus.value === 'initialising' ? 1 : participants.value.length;
   if (layout.value === 'grid') {
     return calcGridLayout(index, total, canvasDim.value.width, canvasDim.value.height);
   } else if (layout.value === 'screenshare') {

src/composable/conferenceActions.ts

@@ -1,4 +1,4 @@
-import type {HxParticipant, LayoutKey, RoomConnectStatusKey} from "../types/conference";
+import type {HxParticipant, LayoutKey, HxMeetingStatus} from "../types/conference";
 import {useThrottleFn} from '@vueuse/core'
 import {convertLinksToAnchorTags, escapeHtml} from "../helper/helper";
 import {defaultLayoutOption, layoutOptions} from "../types/conference";
@@ -23,11 +23,11 @@ import {
 export const useEnterConference = async () => {
   log.info("Enter conference");
   const { roomConnectStatus } = useConferenceState();
-  roomConnectStatus.value = "";
+  roomConnectStatus.value = "initialising";
   await useConnectLivekit();
 };
 
-export const useLeaveConference = async (status: RoomConnectStatusKey = "") => {
+export const useLeaveConference = async ( status: HxMeetingStatus = "initialising") => {
   log.info("Leave conference");
   await useDisconnectLivekit();
   const { resetState } = useConferenceState();

src/composable/conferenceState.ts

@@ -1,16 +1,17 @@
-import {type Ref, ref, computed} from "vue"
+import {type Ref, ref, computed, watch} from "vue"
 
-import type {HxParticipant, ChatMessageUIItem, RoomConnectStatusKey, LayoutKey} from "../types/conference";
+import type {HxParticipant, ChatMessageUIItem, HxMeetingStatus, LayoutKey} from "../types/conference";
 import {exampleNames} from "../helper/example";
 import {defaultLayoutOption} from "../types/conference";
 import {log} from "../helper/logger";
 import {useTrackStore} from "./livekit.ts";
 import {useLocalHxParticipant} from "./conferenceActions.ts";
+import {useEvents} from "./useEvents.ts";
 
 // ---------------------------------------------------------------------
 // Conference data
 // ---------------------------------------------------------------------
-const roomConnectStatus: Ref<RoomConnectStatusKey> = ref("");
+const roomConnectStatus: Ref<HxMeetingStatus> = ref("initialising");
 const microphone: Ref<boolean> = ref(true);
 const camera: Ref<boolean> = ref(true);
 const loadingCamera: Ref<boolean> = ref(false);
@@ -19,6 +20,11 @@ const participants: Ref<HxParticipant[]> = ref([]);
 const messages: Ref<ChatMessageUIItem[]> = ref([]);
 const newMessageCount: Ref<number> = ref(0);
 
+const { emit } = useEvents();
+watch(roomConnectStatus, async (status) => {
+  await emit("status", status);
+})
+
 export const useConferenceState = () => {
 
   // ---------------------------------------------------------------------
@@ -63,7 +69,7 @@ export const useConferenceState = () => {
   const increaseNewMessageCount = () => (newMessageCount.value += 1);
   const resetNewMessageCount = () => (newMessageCount.value = 0);
 
-  const resetState = (status: RoomConnectStatusKey = "") => {
+  const resetState = async (status: HxMeetingStatus = "initialising") => {
     const { resetTracks } = useTrackStore();
     log.info("resetState", status);
     resetTracks();

src/composable/useEvents.ts

@@ -0,0 +1,33 @@
+import {createLogger} from "../helper/logger";
+
+const log = createLogger('HxMeet:Events')
+
+export type HxEvent = 'status'
+export type HxHandler = (payload?: any) => any | Promise<any>;
+type EventMap = Map<HxEvent, Set<HxHandler>>;
+const listeners: EventMap = new Map();
+
+export function useEvents() {
+
+  const on = (event: HxEvent, handler: HxHandler): void => {
+    if (!listeners.has(event)) listeners.set(event, new Set());
+    log.info("Register event handler", event)
+    listeners.get(event)!.add(handler);
+  }
+
+  const off = (event: HxEvent, handler: HxHandler): void => {
+    log.info("Unregister event handler", event)
+    listeners.get(event)?.delete(handler);
+  }
+
+  const emit = (event: HxEvent, payload?: any): Promise<any> => {
+    log.info("Emit event", { event, payload })
+    const list = Array.from(listeners.get(event) ?? []);
+    const results = list.map(h => Promise.resolve().then(() => h(payload)));
+    return Promise.all(results);
+  }
+
+  return {
+    on, off, emit
+  };
+}

src/composable/useExtensions.ts

@@ -1,22 +1,25 @@
 import { shallowRef, type Ref, type Component, isRef } from 'vue';
+import {createLogger} from "../helper/logger";
 
-export type ComponentDescriptor = { component: Component; props?: Record<string, any> };
-type ExtensionValue = Ref<string> | ComponentDescriptor;
+const log = createLogger('HxMeet:Extensions')
+
+export type HxComponentDescriptor = { component: Component; props?: Record<string, any> };
+type ExtensionValue = Ref<string> | HxComponentDescriptor;
 type ExtensionMap = Map<string, ExtensionValue>;
 const extensions: ExtensionMap = new Map();
 
 export function useExtensions() {
 
-  const set = (name: string, item: string | Ref | ComponentDescriptor) => {
+  const set = (name: string, item: string | Ref | HxComponentDescriptor) => {
     if (typeof item === 'string') {
-      console.log("set (string)", name, item)
+      log.info("Set extension (type: string)", name, item)
       extensions.set(name, shallowRef<string>(item));
     } else if (isRef(item)) {
-      console.log("set (ref)", name, item)
+      log.info("Set extension (type: Ref)", name, item)
       extensions.set(name, item as Ref);
     } else {
-      console.log("set (comp-descriptor)", name, item)
-      extensions.set(name, item as ComponentDescriptor);
+      log.info("Set extension (type: ComponentDescriptor)", name, item)
+      extensions.set(name, item as HxComponentDescriptor);
     }
   }
 

src/types/conference.ts

@@ -20,7 +20,7 @@ export interface LayoutStyleItem {
   videoElement: any,
 }
 
-export type RoomConnectStatusKey = "" | "connecting" | "connected" | "failed" | "end" | "noDevices";
+export type HxMeetingStatus = "initialising" | "connecting" | "connected" | "failed" | "end" | "noDevices";
 export type LayoutKey = "circle" | "grid" | "cinema" | "screenshare";
 export const layoutOptions: LayoutKey[] = ['circle', 'grid', 'cinema'];
 export const defaultLayoutOption: LayoutKey = 'circle';