browser-sdk: Add "meeting_end" embed event

Allow customers to take action whenever a meeting has been explicitly
ended by the host.

.changeset/sharp-ducks-end.md

@@ -0,0 +1,5 @@
+---
+"@whereby.com/browser-sdk": minor
+---
+
+Add support for meeting_end event on embed element

packages/browser-sdk/src/lib/embed/index.ts

@@ -47,6 +47,7 @@ interface WherebyEmbedElementEventMap {
     leave: CustomEvent<{ removed: boolean }>;
     participant_join: CustomEvent<{ participant: { metadata: string } }>;
     participant_leave: CustomEvent<{ participant: { metadata: string } }>;
+    meeting_end: CustomEvent;
     microphone_toggle: CustomEvent<{ enabled: boolean }>;
     camera_toggle: CustomEvent<{ enabled: boolean }>;
     chat_toggle: CustomEvent<{ open: boolean }>;

packages/browser-sdk/src/stories/prebuilt-ui.stories.tsx

@@ -78,6 +78,7 @@ const WherebyEmbed = ({
 }: Partial<WherebyEmbedAttributes>) => {
     const elmRef = useRef<WherebyEmbedElement>(null);
     const [cameraEnabled, setCameraEnabled] = useState(video);
+    const [meetingEnded, setMeetingEnded] = useState(false);
 
     useEffect(() => {
         const element = elmRef.current;
@@ -86,11 +87,16 @@ const WherebyEmbed = ({
             const cameraEnabled = e.detail.enabled;
             setCameraEnabled(cameraEnabled);
         });
+
+        element?.addEventListener("meeting_end", () => {
+            setMeetingEnded(true);
+        });
     }, []);
 
     return (
         <p>
-            <span>Camera: {cameraEnabled ? "ENABLED" : "DISABLED"}</span>
+            <p>Camera: {cameraEnabled ? "ENABLED" : "DISABLED"}</p>
+            <p>Meeting ended: {meetingEnded ? "TRUE" : "FALSE"}</p>
             <whereby-embed
                 audio={offOn(audio)}
                 avatarUrl={avatarUrl}