feat: Add option to start video call in DM (#2745)

* add option to start video all in DM

* show speaker icon for dm's in call status name

* show call view if call is active in room

* add Atria call ringtone

* update element call and widget api

* add option to start voice/video call in dms

* only show call button if user have permission

* allow call widget to send call notification event

* show incoming call dialog and play sound

* fix call permission checks

* allow option to start call in all rooms

* send notification when starting call in non-voice rooms

* hide header call button from voice rooms

* prevent call join if call not supported and started by other party

* update call menu style

* show call not supported message on incoming call notification

* improve the incoming call layout

* video call with right click without opening menu

* allow call widget to fetch media url

* add webRTC missing error

* improve call permission label

---------

Co-authored-by: Krishan <33421343+kfiven@users.noreply.github.com>

src/app/styles/Animations.css.ts

@@ -0,0 +1,47 @@
+import { keyframes, style } from '@vanilla-extract/css';
+import { color, toRem } from 'folds';
+
+const wobble = keyframes({
+  '0%': {
+    transform: 'translateX(0) rotateZ(0deg)',
+  },
+  '20%': {
+    transform: `translateX(-${toRem(4)}) rotateZ(-4deg)`,
+  },
+  '40%': {
+    transform: `translateX(${toRem(4)}) rotateZ(4deg)`,
+  },
+  '60%': {
+    transform: `translateX(-${toRem(3)}) rotateZ(-3deg)`,
+  },
+  '80%': {
+    transform: `translateX(${toRem(3)}) rotateZ(3deg)`,
+  },
+  '100%': {
+    transform: 'translateX(0) rotateZ(0deg)',
+  },
+});
+
+const glowPulse = keyframes({
+  '0%': {
+    boxShadow: `0 0 0 ${toRem(0)} ${color.Success.ContainerActive}`,
+  },
+  '100%': {
+    boxShadow: `0 0 0 ${toRem(8)} ${color.Success.ContainerActive}`,
+  },
+});
+
+export const WobbleAnimation = style({
+  animation: `${wobble} 2000ms ease-in-out`,
+  animationIterationCount: 'infinite',
+});
+
+export const GlowAnimation = style({
+  animation: `${glowPulse} 2000ms ease-out`,
+  animationIterationCount: 'infinite',
+});
+
+export const CallAvatarAnimation = style({
+  animation: `${wobble} 2000ms ease-in-out, ${glowPulse} 2000ms ease-out`,
+  animationIterationCount: 'infinite',
+});