recording toggle - allow clicking on the text; restyling
This commit is contained in:
Anton Georgiev
parent
6dcb6266c8
commit
12a880b9bd
@ -3,7 +3,6 @@ import { withTracker } from 'meteor/react-meteor-data';
|
||||
import getFromUserSettings from '/imports/ui/services/users-settings';
|
||||
import Meetings from '/imports/api/meetings';
|
||||
import Auth from '/imports/ui/services/auth';
|
||||
import { makeCall } from '/imports/ui/services/api';
|
||||
import ActionsBar from './component';
|
||||
import Service from './service';
|
||||
import VideoService from '../video-provider/service';
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import React from 'react';
|
||||
import Button from '/imports/ui/components/button/component';
|
||||
import RecordingContainer from '/imports/ui/components/recording/container';
|
||||
import humanizeSeconds from '/imports/utils/humanizeSeconds';
|
||||
import cx from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl, intlShape } from 'react-intl';
|
||||
import { styles } from './styles';
|
||||
@ -56,37 +54,27 @@ class RecordingIndicator extends React.PureComponent {
|
||||
|
||||
if (!record) return null;
|
||||
|
||||
const recordingToggle = () => {
|
||||
mountModal(<RecordingContainer amIModerator={amIModerator} />);
|
||||
document.activeElement.blur();
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{amIModerator ? (
|
||||
<div
|
||||
aria-label={title}
|
||||
className={styles.recordState}
|
||||
title={buttonTitle}
|
||||
className={recording ? styles.recordingControlON : styles.recordingControlOFF}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
key="recording-toggle"
|
||||
onClick={recordingToggle}
|
||||
onKeyPress={recordingToggle}
|
||||
>
|
||||
|
||||
{/* <div className={styles.border}>
|
||||
<Button
|
||||
label={buttonTitle}
|
||||
hideLabel
|
||||
ghost
|
||||
className={cx(styles.btn, recording ? styles.recordIndicator : styles.notRecording)}
|
||||
onClick={() => {
|
||||
mountModal(<RecordingContainer amIModerator={amIModerator} />);
|
||||
document.activeElement.blur();
|
||||
}}
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
<Button
|
||||
label={buttonTitle}
|
||||
hideLabel
|
||||
className={cx(styles.notRecording, !recording && styles.btn)}
|
||||
color={recording ? 'primary' : 'default'}
|
||||
ghost={!recording}
|
||||
onClick={() => {
|
||||
mountModal(<RecordingContainer amIModerator={amIModerator} />);
|
||||
document.activeElement.blur();
|
||||
}}
|
||||
<span
|
||||
className={recording ? styles.recordingIndicatorON : styles.recordingIndicatorOFF}
|
||||
/>
|
||||
|
||||
<div className={styles.presentationTitle}>
|
||||
@ -106,23 +94,19 @@ class RecordingIndicator extends React.PureComponent {
|
||||
|
||||
{amIModerator ? null : (
|
||||
<div
|
||||
aria-label={title}
|
||||
className={styles.recordState}
|
||||
title={`${intl.formatMessage(recording
|
||||
? intlMessages.notificationRecordingStart
|
||||
: intlMessages.notificationRecordingStop)}`}
|
||||
aria-label={`${intl.formatMessage(recording
|
||||
? intlMessages.notificationRecordingStart
|
||||
: intlMessages.notificationRecordingStop)}`}
|
||||
className={styles.recordingStatusViewOnly}
|
||||
>
|
||||
<div className={styles.border}>
|
||||
<Button
|
||||
label={`${intl.formatMessage(recording
|
||||
? intlMessages.notificationRecordingStart
|
||||
: intlMessages.notificationRecordingStop)}`}
|
||||
aria-label={`${intl.formatMessage(recording
|
||||
? intlMessages.notificationRecordingStart
|
||||
: intlMessages.notificationRecordingStop)}`}
|
||||
hideLabel
|
||||
ghost
|
||||
className={cx(styles.btn, recording ? styles.recordIndicator : styles.notRecording)}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span
|
||||
className={recording ? styles.recordingIndicatorON : styles.recordingIndicatorOFF}
|
||||
/>
|
||||
|
||||
<div className={styles.presentationTitle}>
|
||||
{recording ? humanizeSeconds(time) : null}
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,77 @@
|
||||
@import "../../../stylesheets/variables/_all";
|
||||
@import "../../../stylesheets/variables/typography";
|
||||
|
||||
.visuallyHidden {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px; width: 1px;
|
||||
margin: -1px; padding: 0; border: 0;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px; width: 1px;
|
||||
margin: -1px; padding: 0; border: 0;
|
||||
}
|
||||
|
||||
%baseIndicator {
|
||||
%recordingControl {
|
||||
display: flex;
|
||||
border-radius: 5%;
|
||||
padding: 2px !important;
|
||||
|
||||
span {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent !important;
|
||||
color: var(--color-white) !important;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color-white) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.recordingControlON {
|
||||
@extend %recordingControl;
|
||||
|
||||
background-color: var(--color-primary);
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.recordingControlOFF {
|
||||
@extend %recordingControl;
|
||||
|
||||
border: 1px solid var(--color-white);
|
||||
}
|
||||
|
||||
.presentationTitle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-weight: 200;
|
||||
color: var(--color-white);
|
||||
font-size: var(--font-size-base);
|
||||
padding: 0;
|
||||
margin: 0 0 0 var(--sm-padding-x);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 30vw;
|
||||
|
||||
> [class^="icon-bbb-"] {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.recordingStatusViewOnly {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
%recordingIndicator {
|
||||
border: 1px solid var(--color-white) !important;
|
||||
border-radius: 50%;
|
||||
span {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 !important;
|
||||
@ -25,61 +88,30 @@
|
||||
margin-top: calc((var(--font-size-large) / -4));
|
||||
margin-left: calc((var(--font-size-large) / -4));
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.recordingIndicatorON {
|
||||
@extend %recordingIndicator;
|
||||
&:after {
|
||||
background-color: var(--color-danger);
|
||||
}
|
||||
}
|
||||
|
||||
.recordIndicator {
|
||||
@extend %baseIndicator;
|
||||
}
|
||||
|
||||
.presentationTitle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-weight: 200;
|
||||
color: var(--color-white);
|
||||
font-size: var(--font-size-base);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-left: var(--sm-padding-x);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 30vw;
|
||||
|
||||
> [class^="icon-bbb-"] {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.notRecording {
|
||||
@extend %baseIndicator;
|
||||
|
||||
.recordingIndicatorOFF {
|
||||
@extend %recordingIndicator;
|
||||
&:after {
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
.recordState {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.btn {
|
||||
.isRecordingCircle {
|
||||
border: 1px solid var(--color-white) !important;
|
||||
border-radius: 50%;
|
||||
span {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent !important;
|
||||
color: var(--color-white) !important;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: 1px solid rgba(255,255,255, .5) !important;
|
||||
background-color: transparent !important;
|
||||
color: var(--color-white) !important;
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user