New Video Component

[carlossantos74]

!WIP

The goal is to develop a new video component specifically focused on video conferencing, while retaining all existing functionalities. This approach aims to enhance developer experience (DX) by providing a streamlined interface tailored to a single purpose.

---

To achieve this, I first restructured the previous video component as an abstract class, which now implements all the core functions required for a video component.

Next, I created two new components based on this abstract class:

• VideoConference: retains the same properties and behaviors as the original component, including events, methods, and callbacks.
• VideoMeeting: the newly proposed component, specifically for video conferencing.

Both components use the VideoComponent abstract class as their foundation.

Looking ahead, the idea is to keep the core functionalities within the abstract class while gradually moving component-specific logic to individual classes, making the code more modular and easier to maintain.

---

The suggested video meeting class parameters:

const room = await SuperVizRoom(DEVELOPER_KEY, {
  roomId: "ROOM_ID",
  group: {
    id: "GROUP_ID",
    name: "GROUP_NAME",
  },
  participant: {
    id: "USER_ID",
    name: "USER_NAME"
  },
})

video = new VideoMeeting({
  brand?: {
    logoUrl?: string
  }
  permissions: {
    allowGuests?: boolean
    toggleMic?: boolean
    toggleCamera?: boolean,
    toggleScreenShare?: boolean,
    toggleRecording?: boolean,
    toggleChat?: boolean,
    toggleParticipantList?: boolean
  },
  participantType?: ParticipantType | `${ParticipantType}`
  i18n?: {
    language?: string;
    locales?: Locale[];
  },
  styles?: string;
  callbacks?: {
    onToggleMicrophone?: () => void;
    onToggleCam?: () => void;
    onToggleRecording?: () => void;
    onToggleChat?: () => void;
    onToggleScreenShare?: () => void;
    onLeaveMeeting?: () => void;
    onClickSettings?: () => void;
  };
});

// methods
video.toggleMic()
video.toggleVirtualBackground()
video.toggleCamera()
video.toggleScreenShare()
video.toggleRecording()
video.toggleChat()

// add to room

[github-actions]

YJS - Run #174

Tests 📝	Passed ✅	Failed ❌	Skipped ⏭️	Pending ⏳	Other ❓	Flaky 🍂	Duration ⏱️
71	71	0	0	0	0	0	00:00:08

🎉 All tests passed!

Github Actions Test Reporter CTRF

[github-actions]

Realtime - Run #174

Tests 📝	Passed ✅	Failed ❌	Skipped ⏭️	Pending ⏳	Other ❓	Flaky 🍂	Duration ⏱️
130	130	0	0	0	0	0	00:00:09

🎉 All tests passed!

Github Actions Test Reporter CTRF

[github-actions]

SDK - Run #174

Tests 📝	Passed ✅	Failed ❌	Skipped ⏭️	Pending ⏳	Other ❓	Flaky 🍂	Duration ⏱️
748	748	0	0	0	0	0	00:00:22

🎉 All tests passed!

Github Actions Test Reporter CTRF

[github-actions]

LCOV Report - SDK Web Components Test Coverage Report ✅

All Files

• Lines: 6230/6424 (97.0%) ✅ (Minimum coverage is 0%)
• Functions: 304/319 (95.3%)
• Branches: 610/693 (88.0%)

Changed Files

N/A

[github-actions]

Realtime - Run #177

Tests 📝	Passed ✅	Failed ❌	Skipped ⏭️	Pending ⏳	Other ❓	Flaky 🍂	Duration ⏱️
130	130	0	0	0	0	0	00:00:10

🎉 All tests passed!

Github Actions Test Reporter CTRF

[github-actions]

YJS - Run #177

Tests 📝	Passed ✅	Failed ❌	Skipped ⏭️	Pending ⏳	Other ❓	Flaky 🍂	Duration ⏱️
71	71	0	0	0	0	0	00:00:08

🎉 All tests passed!

Github Actions Test Reporter CTRF

[github-actions]

SDK - Run #177

Tests 📝	Passed ✅	Failed ❌	Skipped ⏭️	Pending ⏳	Other ❓	Flaky 🍂	Duration ⏱️
746	746	0	0	0	0	0	00:00:23

🎉 All tests passed!

Github Actions Test Reporter CTRF

[github-actions]

YJS - Run #178

Tests 📝	Passed ✅	Failed ❌	Skipped ⏭️	Pending ⏳	Other ❓	Flaky 🍂	Duration ⏱️
71	71	0	0	0	0	0	00:00:08

🎉 All tests passed!

Github Actions Test Reporter CTRF

[github-actions]

Realtime - Run #178

Tests 📝	Passed ✅	Failed ❌	Skipped ⏭️	Pending ⏳	Other ❓	Flaky 🍂	Duration ⏱️
130	130	0	0	0	0	0	00:00:10

🎉 All tests passed!

Github Actions Test Reporter CTRF

[github-actions]

SDK - Run #178

Tests 📝	Passed ✅	Failed ❌	Skipped ⏭️	Pending ⏳	Other ❓	Flaky 🍂	Duration ⏱️
757	757	0	0	0	0	0	00:00:23

🎉 All tests passed!

Github Actions Test Reporter CTRF