init

react/features/embed-meeting/components/EmbedMeetingButton.ts

@@ -0,0 +1,50 @@
+import { connect } from 'react-redux';
+
+import { createToolbarEvent } from '../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../analytics/functions';
+import { IReduxState } from '../../app/types';
+import { openDialog } from '../../base/dialog/actions';
+import { isMobileBrowser } from '../../base/environment/utils';
+import { translate } from '../../base/i18n/functions';
+import { IconCode } from '../../base/icons/svg';
+import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton';
+import { isVpaasMeeting } from '../../jaas/functions';
+
+import EmbedMeetingDialog from './EmbedMeetingDialog';
+
+/**
+ * Implementation of a button for opening embed meeting dialog.
+ */
+class EmbedMeetingButton extends AbstractButton<AbstractButtonProps> {
+    override accessibilityLabel = 'toolbar.accessibilityLabel.embedMeeting';
+    override icon = IconCode;
+    override label = 'toolbar.embedMeeting';
+    override tooltip = 'toolbar.embedMeeting';
+
+    /**
+     * Handles clicking / pressing the button, and opens the appropriate dialog.
+     *
+     * @protected
+     * @returns {void}
+     */
+    override _handleClick() {
+        const { dispatch } = this.props;
+
+        sendAnalytics(createToolbarEvent('embed.meeting'));
+        dispatch(openDialog(EmbedMeetingDialog));
+    }
+}
+
+/**
+ * Function that maps parts of Redux state tree into component props.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {Object}
+ */
+const mapStateToProps = (state: IReduxState) => {
+    return {
+        visible: !isVpaasMeeting(state) && !isMobileBrowser()
+    };
+};
+
+export default translate(connect(mapStateToProps)(EmbedMeetingButton));

react/features/embed-meeting/components/EmbedMeetingDialog.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { IReduxState } from '../../app/types';
+import CopyButton from '../../base/buttons/CopyButton.web';
+import { getInviteURL } from '../../base/connection/functions';
+import { translate } from '../../base/i18n/functions';
+import Dialog from '../../base/ui/components/web/Dialog';
+import Input from '../../base/ui/components/web/Input';
+
+interface IProps extends WithTranslation {
+
+    /**
+     * The URL of the conference.
+     */
+    url: string;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        container: {
+            paddingTop: theme.spacing(1)
+        },
+
+        button: {
+            marginTop: theme.spacing(3)
+        }
+    };
+});
+
+/**
+ * Allow users to embed a jitsi meeting in an iframe.
+ *
+ * @returns {React$Element<any>}
+ */
+function EmbedMeeting({ t, url }: IProps) {
+    const { classes } = useStyles();
+
+    /**
+     * Get the embed code for a jitsi meeting.
+     *
+     * @returns {string} The iframe embed code.
+     */
+    const getEmbedCode = () =>
+        `<iframe allow="camera; microphone; fullscreen; display-capture; autoplay" src="${url}"`
+        + ' style="height: 100%; width: 100%; border: 0px;"></iframe>';
+
+    return (
+        <Dialog
+            cancel = {{ hidden: true }}
+            ok = {{ hidden: true }}
+            titleKey = { 'embedMeeting.title' }>
+            <div className = { classes.container }>
+                <Input
+                    accessibilityLabel = { t('dialog.embedMeeting') }
+                    id = 'embed-meeting-input'
+                    readOnly = { true }
+                    textarea = { true }
+                    value = { getEmbedCode() } />
+                <CopyButton
+                    accessibilityText = { t('addPeople.copyLink') }
+                    className = { classes.button }
+                    displayedText = { t('dialog.copy') }
+                    id = 'embed-meeting-copy-button'
+                    textOnCopySuccess = { t('dialog.copied') }
+                    textOnHover = { t('dialog.copy') }
+                    textToCopy = { getEmbedCode() } />
+            </div>
+        </Dialog>
+    );
+}
+
+const mapStateToProps = (state: IReduxState) => {
+    return {
+        url: getInviteURL(state)
+    };
+};
+
+export default translate(connect(mapStateToProps)(EmbedMeeting));

react/features/embed-meeting/hooks.ts

@@ -0,0 +1,25 @@
+import { useSelector } from 'react-redux';
+
+import { isMobileBrowser } from '../base/environment/utils';
+import { isVpaasMeeting } from '../jaas/functions';
+
+import EmbedMeetingButton from './components/EmbedMeetingButton';
+
+const embed = {
+    key: 'embedmeeting',
+    Content: EmbedMeetingButton,
+    group: 4
+};
+
+/**
+ * A hook that returns the embed button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useEmbedButton() {
+    const _isVpaasMeeting = useSelector(isVpaasMeeting);
+
+    if (!isMobileBrowser() && !_isVpaasMeeting) {
+        return embed;
+    }
+}