132 lines
2.9 KiB
TypeScript
132 lines
2.9 KiB
TypeScript
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
import styled, { css, keyframes } from 'styled-components';
|
|
import Button from '/imports/ui/components/common/button/component';
|
|
import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
|
|
import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
|
|
import { smPaddingX, smPaddingY } from '/imports/ui/stylesheets/styled-components/general';
|
|
import SpinnerStyles from '/imports/ui/components/common/loading-screen/styles';
|
|
|
|
interface SpinnerOverlayProps {
|
|
animations: boolean;
|
|
}
|
|
|
|
const pulse = keyframes`
|
|
0% {
|
|
box-shadow: 0 0 0 0 white;
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 0.5625rem transparent;
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 transparent;
|
|
}
|
|
`;
|
|
|
|
// @ts-ignore - as button comes from JS, we can't provide its props
|
|
const LeaveButtonWithoutLiveStreamSelector = styled(Button)`
|
|
${({ ghost }) => ghost && `
|
|
span {
|
|
background-color: transparent !important;
|
|
border-color: ${colorWhite} !important;
|
|
}
|
|
`}
|
|
`;
|
|
|
|
// @ts-ignore - as button comes from JS, we can't provide its props
|
|
const MuteToggleButton = styled(Button)`
|
|
margin-right: ${smPaddingX};
|
|
margin-left: 0;
|
|
|
|
@media ${smallOnly} {
|
|
margin-right: ${smPaddingY};
|
|
}
|
|
|
|
[dir='rtl'] & {
|
|
margin-left: ${smPaddingX};
|
|
margin-right: 0;
|
|
|
|
@media ${smallOnly} {
|
|
margin-left: ${smPaddingY};
|
|
}
|
|
}
|
|
|
|
${({ ghost }) => ghost && `
|
|
span {
|
|
background-color: transparent !important;
|
|
border-color: ${colorWhite} !important;
|
|
}
|
|
`}
|
|
|
|
${({ talking }) => talking && `
|
|
border-radius: 50%;
|
|
`}
|
|
|
|
${({ talking, animations }) => talking && animations && css`
|
|
animation: ${pulse} 1s infinite ease-in;
|
|
`}
|
|
|
|
${({ talking, animations }) => talking && !animations && css`
|
|
& span {
|
|
content: '';
|
|
outline: none !important;
|
|
background-clip: padding-box;
|
|
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
|
|
}
|
|
`}
|
|
`;
|
|
|
|
const Container = styled.span`
|
|
display: flex;
|
|
flex-flow: row;
|
|
position: relative;
|
|
|
|
& > div {
|
|
position: relative;
|
|
}
|
|
|
|
& > :last-child {
|
|
margin-left: ${smPaddingX};
|
|
margin-right: 0;
|
|
|
|
@media ${smallOnly} {
|
|
margin-left: ${smPaddingY};
|
|
}
|
|
|
|
[dir='rtl'] & {
|
|
margin-left: 0;
|
|
margin-right: ${smPaddingX};
|
|
|
|
@media ${smallOnly} {
|
|
margin-right: ${smPaddingY};
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
const SpinnerOverlay = styled(SpinnerStyles.Spinner)<SpinnerOverlayProps>`
|
|
& > div {
|
|
background-color: white;
|
|
height: 0.5625rem;
|
|
width: 0.5625rem;
|
|
}
|
|
`;
|
|
|
|
const Bounce1 = styled(SpinnerStyles.Bounce1)<SpinnerOverlayProps>`
|
|
height: 0.5625rem;
|
|
width: 0.5625rem;
|
|
`;
|
|
|
|
const Bounce2 = styled(SpinnerStyles.Bounce2)<SpinnerOverlayProps>`
|
|
height: 0.5625rem;
|
|
width: 0.5625rem;
|
|
`;
|
|
|
|
export default {
|
|
LeaveButtonWithoutLiveStreamSelector,
|
|
MuteToggleButton,
|
|
Container,
|
|
SpinnerOverlay,
|
|
Bounce1,
|
|
Bounce2,
|
|
};
|