[FEAT] Created a "Watch YouTube and chat Together" component

[Palanikannan1437]

Closes #184

Issue in brief

Create a "Watch YouTube and chat together" component for community builders to reuse in multiple routes of convenience.

Suggested Fixes/Changes

• Back-ported Mainstage component from RC4Conferences
• Added a responsive embedded youtube video component
• Created a Mainstage component with embedded youtube video component and EmbeddedChat
• Added a sample use case route at domain/meetups/mainstage with appropriate auth middleware for this particular route
• Replaced Dummy Auth in newMenuBar with existing RC4GoogleAuth component

Demo

[Dnouv]

Please also fix the resizing of the video element it seems to be cut off at the left side when the chat box is opened.

Here (On 990 x 601 px),

Thank you!

[Palanikannan1437]

Please also fix the resizing of the video element it seems to be cut off at the left side when the chat box is opened.

Here (On 990 x 601 px),

Thank you!

Hey thanks for the detailed review, though I'm not sure what you mean there...the video doesn't seemed to be cut out the in the screenshot you've sent😅?

[Sing-Li]

Yes, the URL has to be set at build-time or else the result will never scale.

Dynamic change of the URL will require propagation to all deployed instances (there can be one day - hundreds of nginxes) in a reactive update (which is close to impossible to implement efficiently).

[Palanikannan1437]

@Dnouv Please review the changes, since after https://github.com/RocketChat/EmbeddedChat/pull/53 getting merged, everything should be working fine now in the embedded chat component and Next 13!

Thank you 😄

[Dnouv]

Hey thanks for the detailed review, though I'm not sure what you mean there...the video doesn't seemed to be cut out the in the screenshot you've sent😅?

Ah, my bad, for not conveying it properly, what I meant was please look at the left corner, the video should have shown the title as "DEAF KEV", but it is getting cropped out due to incorrect responsive size, and only "KEV" appears as shown in the screenshot. I hope this makes things clear.

Thank you!

[Sing-Li]

@Palanikannan1437 please fix as per @Dnouv 's review. Thanks.

[Palanikannan1437]

Hey thanks for the detailed review, though I'm not sure what you mean there...the video doesn't seemed to be cut out the in the screenshot you've sent😅?

Ah, my bad, for not conveying it properly, what I meant was please look at the left corner, the video should have shown the title as "DEAF KEV", but it is getting cropped out due to incorrect responsive size, and only "KEV" appears as shown in the screenshot. I hope this makes things clear.

Thank you!

Hey that's just the thumbnail though since the background-position on the thumbnail image that's at 16:9 is set to center, once the youtube video starts playing...it starts off responsive, nothing get's cut out in the video iframe. What do you suggest is to be done?