added: extension management and first extension point in info panel

Author: urbansky

src/App.vue

@@ -11,6 +11,9 @@ 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"
+  }
 }
 
 </script>

src/components/HxMeeting.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import {onMounted, onUnmounted} from "vue";
+import {onMounted, onUnmounted, watch, type Ref} from "vue";
 import HxToolbarTop from "./toolbar/HxToolbarTop.vue";
 import HxToolbar from "./toolbar/HxToolbar.vue";
 import HxSidebarPanel from "./HxSidebarPanel.vue";
@@ -56,16 +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";
+
 const { hideSidebar } = useUIState();
 const {closeAllModals} = useModal()
 
 export interface HxMeetingProps {
   livekitUrl: string,
   livekitToken: string,
+  extensions?: Record<string, string | Ref | ComponentDescriptor>;
 }
 
 const props = defineProps<HxMeetingProps>()
 
+// ----------------------------------------------------------
+// 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 }
+);
+
+// ----------------------------------------------------------
+// ----------------------------------------------------------
+// ----------------------------------------------------------
+
 onBeforeMount(() => {
   provideLivekitConfig(
       props.livekitUrl,

src/components/sidebar/HxInfoPanel.vue

@@ -1,6 +1,14 @@
 <template>
     <HxPanel title="Info">
       <div class="text-sm" :class="{ 'select-none': sidebarResizing }">
+
+        <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"
+        />
+
       </div>
       <template #footer>
         <div class="flex justify-between items-center">
@@ -26,19 +34,21 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted} from "vue";
+import {ref, onMounted, isRef} from "vue";
 import type { DropdownMenuItem } from '@nuxt/ui'
 import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
 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';
 const { sidebarResizing } = useUIState();
 
+const { get } = useExtensions();
 const helpItems = ref<DropdownMenuItem[][]>([]);
 
+const bodyExtension = get('sidebar.info.body')
+
 onMounted(async () => {
   helpItems.value.push([
     { label: "Follow us for more news", icon: "i-hugeicons-new-twitter-ellipse", to: "https://x.com/hxmeet", target: "_blank" }

src/composable/useExtensions.ts

@@ -0,0 +1,32 @@
+import { shallowRef, type Ref, type Component, isRef } from 'vue';
+
+export type ComponentDescriptor = { component: Component; props?: Record<string, any> };
+type ExtensionValue = Ref<string> | ComponentDescriptor;
+type ExtensionMap = Map<string, ExtensionValue>;
+const extensions: ExtensionMap = new Map();
+
+export function useExtensions() {
+
+  const set = (name: string, item: string | Ref | ComponentDescriptor) => {
+    if (typeof item === 'string') {
+      console.log("set (string)", name, item)
+      extensions.set(name, shallowRef<string>(item));
+    } else if (isRef(item)) {
+      console.log("set (ref)", name, item)
+      extensions.set(name, item as Ref);
+    } else {
+      console.log("set (comp-descriptor)", name, item)
+      extensions.set(name, item as ComponentDescriptor);
+    }
+  }
+
+  const get = (name: string): ExtensionValue | undefined => {
+    return extensions.get(name);
+  }
+
+  return {
+    extensions,
+    get,
+    set
+  };
+}