BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

convert video-provider video-button component

Browse Source
This commit is contained in:
Ramón Souza 2021-11-03 13:06:18 +00:00
parent 0091134326
commit eefa3e6492
3 changed files with 18 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
bigbluebutton-html5/imports/ui/components/video-provider/video-button/component.jsx
View File

@ -1,10 +1,8 @@
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import Button from '/imports/ui/components/button/component';
import VideoService from '../service';
import { defineMessages, injectIntl } from 'react-intl';
import { styles } from './styles';
import Styled from './styles';
import { validIOSVersion } from '/imports/ui/components/app/service';
import { debounce } from 'lodash';
@ -70,10 +68,9 @@ const JoinVideoButton = ({
if (disableReason) label = intl.formatMessage(intlMessages[disableReason]);
return (
<Button
<Styled.VideoButton
label={label}
data-test={hasVideoStream ? 'leaveVideo' : 'joinVideo'}
className={cx(hasVideoStream || styles.btn)}
onClick={handleOnClick}
hideLabel
color={hasVideoStream ? 'primary' : 'default'}

16
bigbluebutton-html5/imports/ui/components/video-provider/video-button/styles.js Normal file
View File

@ -0,0 +1,16 @@
import styled from 'styled-components';
import Button from '/imports/ui/components/button/component';
const VideoButton = styled(Button)`
${({ ghost }) => ghost && `
& > span {
box-shadow: none;
background-color: transparent !important;
border-color: var(--color-white) !important;
}
`}
`;
export default {
VideoButton,
};

32
bigbluebutton-html5/imports/ui/components/video-provider/video-button/styles.scss
View File

@ -1,32 +0,0 @@
@import "/imports/ui/stylesheets/variables/breakpoints";
@import "/imports/ui/components/actions-bar/styles.scss";
.imageSize {
height: 4rem;
@include mq($small-only) {
margin: auto 1rem;
}
}
.label {
font-size: var(--font-size-small);
white-space: nowrap;
margin-top: .5rem;
color: inherit;
@include mq($small-only) {
margin-top: 0;
font-size: 90%;
}
}
.item {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
@include mq($small-only) {
flex-direction: row;
}
}