+
+ {intl.formatMessage(intlMessages.transcriptionLabel)}
+ {intl.formatMessage(intlMessages.transcriptionDesc)}
+
+
+
+
+
+
+
+ {intl.formatMessage(intlMessages.partialUtterancesLabel)}
+
+
+
+
+
+ this.handleToggle('partialUtterances')}
+ ariaLabelledBy="partialUtterances"
+ ariaLabel={`${intl.formatMessage(intlMessages.partialUtterancesLabel)} - ${displaySettingsStatus(partialUtterances, true)}`}
+ showToggleLabel={showToggleLabel}
+ />
+
+
+
+
+
+
+
+ {intl.formatMessage(intlMessages.minUtteranceLengthLabel)}
+
+
+
+
+
+ this.handleInput('minUtteranceLength', e) }
+ type="number"
+ max="5"
+ min="0"
+ >
+
+
+
+
+
+
+ );
+ }
+}
+
+export default injectIntl(Transcription);
diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/transcription/styles.js b/bigbluebutton-html5/imports/ui/components/settings/submenus/transcription/styles.js
new file mode 100644
index 0000000000..4cf67d4170
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/transcription/styles.js
@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import Styled from '/imports/ui/components/settings/submenus/styles';
+
+const Title = styled(Styled.Title)``;
+
+const SubTitle = styled(Styled.SubTitle)``;
+
+const Form = styled(Styled.Form)``;
+
+const Row = styled(Styled.Row)``;
+
+const Col = styled(Styled.Col)``;
+
+const FormElement = styled(Styled.FormElement)``;
+
+const FormElementRight = styled(Styled.FormElementRight)``;
+
+const Label = styled(Styled.Label)``;
+
+export default {
+ Title,
+ SubTitle,
+ Form,
+ Row,
+ Col,
+ FormElement,
+ FormElementRight,
+ Label,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/captions-list-item/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/captions-list-item/component.jsx
index ca80b89abc..7cef3fb3e4 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/captions-list-item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/captions-list-item/component.jsx
@@ -20,6 +20,10 @@ const intlMessages = defineMessages({
id: 'app.captions.label',
description: 'used for captions button aria label',
},
+ captionTitle: {
+ id: 'app.captions.title',
+ description: 'title for the transcription pad button on the sidebar',
+ },
});
const CaptionsListItem = (props) => {
@@ -70,7 +74,7 @@ const CaptionsListItem = (props) => {
onKeyPress={() => {}}
>