convert video-list component
This commit is contained in:
Ramón Souza
parent
53575aaf98
commit
b989fa1840
@ -2,7 +2,7 @@ import styled from 'styled-components';
|
||||
import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
|
||||
import { mdPaddingX } from '/imports/ui/stylesheets/styled-components/general';
|
||||
import { mediumUp } from '/imports/ui/stylesheets/styled-components/breakpoints';
|
||||
import { actionsBarHeight, navbarHeight } from '/import/ui/stylesheets/styled-components/general';
|
||||
import { actionsBarHeight, navbarHeight } from '/imports/ui/stylesheets/styled-components/general';
|
||||
import Button from '/imports/ui/components/button/component';
|
||||
|
||||
const NextPageButton = styled(Button)`
|
||||
|
||||
@ -1,308 +0,0 @@
|
||||
@import "/imports/ui/stylesheets/variables/breakpoints";
|
||||
@import "/imports/ui/stylesheets/variables/placeholders";
|
||||
@import "/imports/ui/components/media/styles";
|
||||
|
||||
.videoCanvas {
|
||||
--cam-dropdown-width: 70%;
|
||||
--audio-indicator-width: 1.12rem;
|
||||
--audio-indicator-fs: 75%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
min-height: var(--video-height);
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.videoCanvasLRPosition {
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.videoList {
|
||||
display: grid;
|
||||
|
||||
grid-auto-flow: dense;
|
||||
grid-gap: 1px;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
@include mq($medium-up) {
|
||||
grid-gap: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.videoListItem {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
&.focused {
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.mirroredVideo {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-width: 100%;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: 5px solid var(--color-primary);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
:global(.animationsEnabled) & {
|
||||
transition: opacity .1s;
|
||||
}
|
||||
}
|
||||
|
||||
&.talking::after {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
%media-area {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
background-color: var(--color-black);
|
||||
}
|
||||
|
||||
.cursorGrab{
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.cursorGrabbing{
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.videoContainer{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.connecting {
|
||||
@extend %media-area;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
border-radius: 1px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.loadingText {
|
||||
@extend %text-elipsis;
|
||||
color: var(--color-white);
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.media {
|
||||
@extend %media-area;
|
||||
}
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 1.25rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dropdown,
|
||||
.dropdownFireFox {
|
||||
display: flex;
|
||||
outline: none !important;
|
||||
width: var(--cam-dropdown-width);
|
||||
|
||||
@include mq($medium-up) {
|
||||
>[aria-expanded] {
|
||||
padding: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq($landscape) {
|
||||
button {
|
||||
width: calc(100vw - 4rem);
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownFireFox {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.dropdownTrigger,
|
||||
.userName {
|
||||
@extend %text-elipsis;
|
||||
position: relative;
|
||||
// Keep the background with 0.5 opacity, but leave the text with 1
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 1px;
|
||||
color: var(--color-off-white);
|
||||
padding: 0 1rem 0 .5rem !important;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.noMenu {
|
||||
padding: 0 .5rem 0 .5rem !important;
|
||||
}
|
||||
|
||||
.dropdownTrigger {
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
content: "\203a";
|
||||
position: absolute;
|
||||
transform: rotate(90deg);
|
||||
top: 45%;
|
||||
width: 0;
|
||||
line-height: 0;
|
||||
right: .45rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownContent {
|
||||
min-width: 8.5rem;
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
@include mq($small-only) {
|
||||
height: 90%;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownList {
|
||||
@include mq($medium-up) {
|
||||
font-size: .86rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hiddenDesktop {
|
||||
display: none;
|
||||
|
||||
@include mq($small-only) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.muted,
|
||||
.voice {
|
||||
display: inline-block;
|
||||
width: var(--audio-indicator-width);
|
||||
height: var(--audio-indicator-width);
|
||||
min-width: var(--audio-indicator-width);
|
||||
min-height: var(--audio-indicator-width);
|
||||
color: var(--color-white);
|
||||
border-radius: 50%;
|
||||
|
||||
&::before {
|
||||
font-size: var(--audio-indicator-fs);
|
||||
}
|
||||
}
|
||||
|
||||
.muted {
|
||||
background-color: var(--color-danger);
|
||||
}
|
||||
|
||||
.voice {
|
||||
background-color: var(--color-success);
|
||||
}
|
||||
|
||||
.nextPage,
|
||||
.previousPage{
|
||||
color: var(--color-white);
|
||||
width: var(--md-padding-x);
|
||||
|
||||
i {
|
||||
[dir="rtl"] & {
|
||||
-webkit-transform: scale(-1, 1);
|
||||
-moz-transform: scale(-1, 1);
|
||||
-ms-transform: scale(-1, 1);
|
||||
-o-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nextPage {
|
||||
margin-left: 1px;
|
||||
|
||||
@include mq($medium-up) {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.nextPageLRPosition {
|
||||
order: 3;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.previousPage {
|
||||
margin-right: 1px;
|
||||
|
||||
@include mq($medium-up) {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.previousPageLRPosition {
|
||||
order: 2;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.unhealthyStream {
|
||||
filter: grayscale(50%) opacity(50%);
|
||||
}
|
||||
|
||||
.reconnecting {
|
||||
@extend .connectingSpinner;
|
||||
background-color: transparent;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.break {
|
||||
order: 1;
|
||||
flex-basis: 100%;
|
||||
height: 5px;
|
||||
}
|
||||
@ -2,12 +2,10 @@ import React, { Component } from 'react';
|
||||
import browserInfo from '/imports/utils/browserInfo';
|
||||
import { Meteor } from 'meteor/meteor';
|
||||
import PropTypes from 'prop-types';
|
||||
import cx from 'classnames';
|
||||
import BBBMenu from '/imports/ui/components/menu/component';
|
||||
import Icon from '/imports/ui/components/icon/component';
|
||||
import FullscreenService from '/imports/ui/components/fullscreen-button/service';
|
||||
import FullscreenButtonContainer from '/imports/ui/components/fullscreen-button/container';
|
||||
import { styles } from '../styles.scss';
|
||||
import Styled from './styles';
|
||||
import VideoService from '../../service';
|
||||
import {
|
||||
isStreamStateUnhealthy,
|
||||
@ -15,6 +13,7 @@ import {
|
||||
unsubscribeFromStreamStateChange,
|
||||
} from '/imports/ui/services/bbb-webrtc-sfu/stream-state-service';
|
||||
import { ACTIONS } from '/imports/ui/components/layout/enums';
|
||||
import Settings from '/imports/ui/services/settings';
|
||||
|
||||
const ALLOW_FULLSCREEN = Meteor.settings.public.app.allowFullscreen;
|
||||
|
||||
@ -188,64 +187,54 @@ class VideoListItem extends Component {
|
||||
const shouldRenderReconnect = !isStreamHealthy && videoIsReady;
|
||||
|
||||
const { isFirefox } = browserInfo;
|
||||
|
||||
const { animations } = Settings.application;
|
||||
|
||||
return (
|
||||
<div
|
||||
<Styled.Content
|
||||
talking={voiceUser.talking}
|
||||
fullscreen={isFullscreenContext}
|
||||
data-test={voiceUser.talking ? 'webcamItemTalkingUser' : 'webcamItem'}
|
||||
className={cx({
|
||||
[styles.content]: true,
|
||||
[styles.talking]: voiceUser.talking,
|
||||
[styles.fullscreen]: isFullscreenContext,
|
||||
})}
|
||||
animations={animations}
|
||||
>
|
||||
{
|
||||
!videoIsReady
|
||||
&& (
|
||||
<div
|
||||
<Styled.WebcamConnecting
|
||||
data-test="webcamConnecting"
|
||||
className={cx({
|
||||
[styles.connecting]: true,
|
||||
[styles.content]: true,
|
||||
[styles.talking]: voiceUser.talking,
|
||||
})}
|
||||
talking={voiceUser.talking}
|
||||
animations={animations}
|
||||
>
|
||||
<span className={styles.loadingText}>{name}</span>
|
||||
</div>
|
||||
<Styled.LoadingText>{name}</Styled.LoadingText>
|
||||
</Styled.WebcamConnecting>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
shouldRenderReconnect
|
||||
&& <div className={styles.reconnecting} />
|
||||
&& <Styled.Reconnecting />
|
||||
}
|
||||
|
||||
<div
|
||||
className={styles.videoContainer}
|
||||
ref={(ref) => { this.videoContainer = ref; }}
|
||||
>
|
||||
<video
|
||||
<Styled.VideoContainer ref={(ref) => { this.videoContainer = ref; }}>
|
||||
<Styled.Video
|
||||
muted
|
||||
data-test={this.mirrorOwnWebcam ? 'mirroredVideoContainer' : 'videoContainer'}
|
||||
className={cx({
|
||||
[styles.media]: true,
|
||||
[styles.mirroredVideo]: (this.mirrorOwnWebcam && !mirrored)
|
||||
|| (!this.mirrorOwnWebcam && mirrored),
|
||||
[styles.unhealthyStream]: shouldRenderReconnect,
|
||||
})}
|
||||
mirrored={(this.mirrorOwnWebcam && !mirrored)
|
||||
|| (!this.mirrorOwnWebcam && mirrored)}
|
||||
unhealthyStream={shouldRenderReconnect}
|
||||
ref={(ref) => { this.videoTag = ref; }}
|
||||
autoPlay
|
||||
playsInline
|
||||
/>
|
||||
{videoIsReady && this.renderFullscreenButton()}
|
||||
</div>
|
||||
</Styled.VideoContainer>
|
||||
{videoIsReady
|
||||
&& (
|
||||
<div className={styles.info}>
|
||||
<Styled.Info>
|
||||
{enableVideoMenu && availableActions.length >= 1
|
||||
? (
|
||||
<BBBMenu
|
||||
trigger={<div tabIndex={0} className={styles.dropdownTrigger}>{name}</div>}
|
||||
trigger={<Styled.DropdownTrigger tabIndex={0}>{name}</Styled.DropdownTrigger>}
|
||||
actions={this.getAvailableActions()}
|
||||
opts={{
|
||||
id: "default-dropdown-menu",
|
||||
@ -260,24 +249,18 @@ class VideoListItem extends Component {
|
||||
/>
|
||||
)
|
||||
: (
|
||||
<div className={isFirefox ? styles.dropdownFireFox
|
||||
: styles.dropdown}
|
||||
>
|
||||
<span className={cx({
|
||||
[styles.userName]: true,
|
||||
[styles.noMenu]: numOfStreams < 3,
|
||||
})}
|
||||
>
|
||||
<Styled.Dropdown isFirefox={isFirefox}>
|
||||
<Styled.UserName noMenu={numOfStreams < 3}>
|
||||
{name}
|
||||
</span>
|
||||
</div>
|
||||
</Styled.UserName>
|
||||
</Styled.Dropdown>
|
||||
)}
|
||||
{voiceUser.muted && !voiceUser.listenOnly ? <Icon className={styles.muted} iconName="unmute_filled" /> : null}
|
||||
{voiceUser.listenOnly ? <Icon className={styles.voice} iconName="listen" /> : null}
|
||||
{voiceUser.joined && !voiceUser.muted ? <Icon className={styles.voice} iconName="unmute" /> : null}
|
||||
</div>
|
||||
{voiceUser.muted && !voiceUser.listenOnly ? <Styled.Muted iconName="unmute_filled" /> : null}
|
||||
{voiceUser.listenOnly ? <Styled.Voice iconName="listen" /> : null}
|
||||
{voiceUser.joined && !voiceUser.muted ? <Styled.Voice iconName="unmute" /> : null}
|
||||
</Styled.Info>
|
||||
)}
|
||||
</div>
|
||||
</Styled.Content>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,278 @@
|
||||
import styled from 'styled-components';
|
||||
import Icon from '/imports/ui/components/icon/component';
|
||||
import {
|
||||
colorPrimary,
|
||||
colorBlack,
|
||||
colorWhite,
|
||||
colorOffWhite,
|
||||
colorDanger,
|
||||
colorSuccess,
|
||||
} from '/imports/ui/stylesheets/styled-components/palette';
|
||||
import { TextElipsis, DivElipsis } from '/imports/ui/stylesheets/styled-components/placeholders';
|
||||
import { landscape, mediumUp } from '/imports/ui/stylesheets/styled-components/breakpoints';
|
||||
import {
|
||||
audioIndicatorWidth,
|
||||
audioIndicatorFs,
|
||||
} from '/imports/ui/stylesheets/styled-components/general';
|
||||
|
||||
const Content = styled.div`
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-width: 100%;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: 5px solid ${colorPrimary};
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
${({ animations }) => animations && `
|
||||
transition: opacity .1s;
|
||||
`}
|
||||
}
|
||||
|
||||
${({ talking }) => talking && `
|
||||
&::after {
|
||||
opacity: 0.7;
|
||||
}
|
||||
`}
|
||||
|
||||
${({ fullscreen }) => fullscreen && `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 99;
|
||||
`}
|
||||
`;
|
||||
|
||||
const WebcamConnecting = styled.div`
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
background-color: ${colorBlack};
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
border-radius: 1px;
|
||||
opacity: 1;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-width: 100%;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: 5px solid ${colorPrimary};
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
${({ animations }) => animations && `
|
||||
transition: opacity .1s;
|
||||
`}
|
||||
}
|
||||
|
||||
${({ talking }) => talking && `
|
||||
&::after {
|
||||
opacity: 0.7;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const LoadingText = styled(TextElipsis)`
|
||||
color: ${colorWhite};
|
||||
font-size: 100%;
|
||||
`;
|
||||
|
||||
const Reconnecting = styled.div`
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
font-size: 2.5rem;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
margin: 0 -0.25em 0 0;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 0 -0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "\\e949";
|
||||
/* ascii code for the ellipsis character */
|
||||
font-family: 'bbb-icons' !important;
|
||||
display: inline-block;
|
||||
|
||||
${({ animations }) => animations && `
|
||||
animation: spin 4s infinite linear;
|
||||
`}
|
||||
}
|
||||
|
||||
background-color: transparent;
|
||||
color: ${colorWhite};
|
||||
`;
|
||||
|
||||
const VideoContainer = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const Video = styled.video`
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
background-color: ${colorBlack};
|
||||
|
||||
${({ mirrored }) => mirrored && `
|
||||
transform: scale(-1, 1);
|
||||
`}
|
||||
|
||||
${({ unhealthyStream }) => unhealthyStream && `
|
||||
filter: grayscale(50%) opacity(50%);
|
||||
`}
|
||||
`;
|
||||
|
||||
const Info = styled.div`
|
||||
position: absolute;
|
||||
display: flex;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 1.25rem;
|
||||
z-index: 2;
|
||||
`;
|
||||
|
||||
const Dropdown = styled.div`
|
||||
display: flex;
|
||||
outline: none !important;
|
||||
width: 70%;
|
||||
|
||||
@media ${mediumUp} {
|
||||
>[aria-expanded] {
|
||||
padding: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media ${landscape} {
|
||||
button {
|
||||
width: calc(100vw - 4rem);
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
${({ isFirefox }) => isFirefox && `
|
||||
max-width: 100%;
|
||||
`}
|
||||
`;
|
||||
|
||||
const UserName = styled(TextElipsis)`
|
||||
position: relative;
|
||||
// Keep the background with 0.5 opacity, but leave the text with 1
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 1px;
|
||||
color: ${colorOffWhite};
|
||||
padding: 0 1rem 0 .5rem !important;
|
||||
font-size: 80%;
|
||||
|
||||
${({ noMenu }) => noMenu && `
|
||||
padding: 0 .5rem 0 .5rem !important;
|
||||
`}
|
||||
`;
|
||||
|
||||
const Muted = styled(Icon)`
|
||||
display: inline-block;
|
||||
width: ${audioIndicatorWidth};
|
||||
height: ${audioIndicatorWidth};
|
||||
min-width: ${audioIndicatorWidth};
|
||||
min-height: ${audioIndicatorWidth};
|
||||
color: ${colorWhite};
|
||||
border-radius: 50%;
|
||||
|
||||
&::before {
|
||||
font-size: ${audioIndicatorFs};
|
||||
}
|
||||
|
||||
background-color: ${colorDanger};
|
||||
`;
|
||||
|
||||
const Voice = styled(Icon)`
|
||||
display: inline-block;
|
||||
width: ${audioIndicatorWidth};
|
||||
height: ${audioIndicatorWidth};
|
||||
min-width: ${audioIndicatorWidth};
|
||||
min-height: ${audioIndicatorWidth};
|
||||
color: ${colorWhite};
|
||||
border-radius: 50%;
|
||||
|
||||
&::before {
|
||||
font-size: ${audioIndicatorFs};
|
||||
}
|
||||
|
||||
background-color: ${colorSuccess};
|
||||
`;
|
||||
|
||||
const DropdownTrigger = styled(DivElipsis)`
|
||||
position: relative;
|
||||
// Keep the background with 0.5 opacity, but leave the text with 1
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 1px;
|
||||
color: ${colorOffWhite};
|
||||
padding: 0 1rem 0 .5rem !important;
|
||||
font-size: 80%;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
content: "\\203a";
|
||||
position: absolute;
|
||||
transform: rotate(90deg);
|
||||
top: 45%;
|
||||
width: 0;
|
||||
line-height: 0;
|
||||
right: .45rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export default {
|
||||
Content,
|
||||
WebcamConnecting,
|
||||
LoadingText,
|
||||
Reconnecting,
|
||||
VideoContainer,
|
||||
Video,
|
||||
Info,
|
||||
Dropdown,
|
||||
UserName,
|
||||
Muted,
|
||||
Voice,
|
||||
DropdownTrigger,
|
||||
};
|
||||
@ -1,9 +1,11 @@
|
||||
const smallOnly = 'only screen and (max-width: 40em)';
|
||||
const mediumOnly = 'only screen and (min-width: 40.063em) and (max-width: 64em)';
|
||||
const mediumUp = 'only screen and (min-width: 40.063em)';
|
||||
const landscape = "only screen and (orientation: landscape)";
|
||||
|
||||
export {
|
||||
smallOnly,
|
||||
mediumOnly,
|
||||
mediumUp,
|
||||
landscape,
|
||||
};
|
||||
|
||||
@ -22,6 +22,8 @@ const titlePositionLeft = '2.2rem';
|
||||
const userIndicatorsOffset = '-5px';
|
||||
const indicatorPadding = '.45rem'; // used to center presenter indicator icon in Chrome / Firefox / Edge
|
||||
const actionsBarHeight = '75px'; // TODO: Change to ActionsBar real height
|
||||
const audioIndicatorWidth = '1.12rem';
|
||||
const audioIndicatorFs = '75%';
|
||||
|
||||
export {
|
||||
borderSizeSmall,
|
||||
@ -47,4 +49,6 @@ export {
|
||||
userIndicatorsOffset,
|
||||
indicatorPadding,
|
||||
actionsBarHeight,
|
||||
audioIndicatorWidth,
|
||||
audioIndicatorFs,
|
||||
};
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
const colorWhite = '#FFF';
|
||||
const colorOffWhite = '#F3F6F9';
|
||||
|
||||
const colorBlack = '#000000';
|
||||
|
||||
const colorGray = '#4E5A66';
|
||||
const colorGrayDark = '#06172A';
|
||||
const colorGrayLight = '#8B9AA8';
|
||||
@ -39,6 +41,7 @@ const loaderBullet = colorWhite;
|
||||
export {
|
||||
colorWhite,
|
||||
colorOffWhite,
|
||||
colorBlack,
|
||||
colorGray,
|
||||
colorGrayDark,
|
||||
colorGrayLight,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user