e5e0b96861* 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>
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
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',
|
|
});
|