From b1e12d33abbd9d5f065080be496662890e52e38c Mon Sep 17 00:00:00 2001
From: Tudor-Ovidiu Avram <tudor.potecaru@8x8.com>
Date: Thu, 23 Jul 2020 11:16:40 +0300
Subject: [PATCH] feat(embed) implement embed meeting feature

---
 css/buttons/copy.scss                         |  1 +
 css/main.scss                                 |  1 +
 css/modals/embed-meeting/_embed-meeting.scss  | 59 ++++++++++++++++
 css/modals/invite/_invite_more.scss           |  4 --
 interface_config.js                           |  2 +-
 lang/main.json                                |  6 ++
 react/features/base/icons/svg/code-block.svg  |  4 ++
 react/features/base/icons/svg/index.js        |  1 +
 .../components/EmbedMeetingDialog.js          | 69 +++++++++++++++++++
 .../components/EmbedMeetingTrigger.js         | 50 ++++++++++++++
 .../embed-meeting/components/Header.js        | 38 ++++++++++
 .../embed-meeting/components/index.js         |  1 +
 react/features/embed-meeting/index.js         |  1 +
 .../add-people-dialog/web/AddPeopleDialog.js  |  3 +
 .../web/InviteByEmailSection.js               |  1 -
 .../toolbox/components/web/Toolbox.js         | 35 ++++++++++
 16 files changed, 270 insertions(+), 6 deletions(-)
 create mode 100644 css/modals/embed-meeting/_embed-meeting.scss
 create mode 100644 react/features/base/icons/svg/code-block.svg
 create mode 100644 react/features/embed-meeting/components/EmbedMeetingDialog.js
 create mode 100644 react/features/embed-meeting/components/EmbedMeetingTrigger.js
 create mode 100644 react/features/embed-meeting/components/Header.js
 create mode 100644 react/features/embed-meeting/components/index.js
 create mode 100644 react/features/embed-meeting/index.js

diff --git a/css/buttons/copy.scss b/css/buttons/copy.scss
index 9596abcc36..20867ce516 100644
--- a/css/buttons/copy.scss
+++ b/css/buttons/copy.scss
@@ -21,6 +21,7 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         max-width: 292px;
+        margin-right: 16px;
 
         &.selected {
             font-weight: 600;
diff --git a/css/main.scss b/css/main.scss
index 1257937f28..4b3ed8c4ee 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -37,6 +37,7 @@ $flagsImagePath: "../images/";
 @import 'modals/desktop-picker/desktop-picker';
 @import 'modals/device-selection/device-selection';
 @import 'modals/dialog';
+@import 'modals/embed-meeting/embed-meeting';
 @import 'modals/feedback/feedback';
 @import 'modals/invite/info';
 @import 'modals/settings/settings';
diff --git a/css/modals/embed-meeting/_embed-meeting.scss b/css/modals/embed-meeting/_embed-meeting.scss
new file mode 100644
index 0000000000..3d3a7f21a4
--- /dev/null
+++ b/css/modals/embed-meeting/_embed-meeting.scss
@@ -0,0 +1,59 @@
+.embed-meeting {
+    &-dialog {
+        display: flex;
+        flex-direction: column;
+
+        &-header {
+            display: flex;
+            justify-content: space-between;
+            margin: 16px 16px 24px;
+            width: calc(100% - 32px);
+            color: #fff;
+            font-weight: 600;
+            font-size: 24px;
+            line-height: 32px;
+
+            & > div > svg {
+                cursor: pointer;
+                fill: #A4B8D1;
+            }
+        }
+    }
+
+    &-copy {
+        color: white;
+        font-size: 15px;
+        margin-left: auto;
+        margin-top: 16px;
+        width: auto;
+    }
+
+    &-code {
+        background: transparent;
+        border: 1px solid #A4B8D1;
+        color: white;
+        font-size: 15px;
+        height: 165px;
+        line-height: 24px;
+        padding: 8px;
+        width: 100%;
+        resize: vertical;
+    }
+
+    &-trigger {
+        display: flex;
+        align-items: center;
+        padding: 8px 8px 8px 16px;
+        margin-top: 24px;
+        width: calc(100% - 24px);
+        height: 24px;
+        background: #2A3A4B;
+        border: 1px solid #5E6D7A;
+        border-radius: 4px;
+        cursor: pointer;
+
+        .jitsi-icon {
+            margin-right: 20px;
+        }
+    }
+}
diff --git a/css/modals/invite/_invite_more.scss b/css/modals/invite/_invite_more.scss
index 73160928a2..742f4e8981 100644
--- a/css/modals/invite/_invite_more.scss
+++ b/css/modals/invite/_invite_more.scss
@@ -47,10 +47,6 @@
         font-size: 15px;
         line-height: 24px;
 
-        & > span {
-            font-weight: 600;
-        }
-
         &.header {
             display: flex;
             justify-content: space-between;
diff --git a/interface_config.js b/interface_config.js
index dfcc6cdfcb..32f8f221ab 100644
--- a/interface_config.js
+++ b/interface_config.js
@@ -185,7 +185,7 @@ var interfaceConfig = {
      * - 'desktop' controls the "Share your screen" button
      */
     TOOLBAR_BUTTONS: [
-        'microphone', 'camera', 'closedcaptions', 'desktop', 'fullscreen',
+        'microphone', 'camera', 'closedcaptions', 'desktop', 'embedmeeting', 'fullscreen',
         'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
         'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
         'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
diff --git a/lang/main.json b/lang/main.json
index bd326a1587..b98ec138a4 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -190,6 +190,7 @@
         "connectErrorWithMsg": "Oops! Something went wrong and we couldn't connect to the conference: {{msg}}",
         "connecting": "Connecting",
         "contactSupport": "Contact support",
+        "copied": "Copied",
         "copy": "Copy",
         "dismiss": "Dismiss",
         "displayNameRequired": "Hi! What’s your name?",
@@ -316,6 +317,9 @@
     "e2ee": {
         "labelToolTip": "Audio and Video Communication on this call is end-to-end encrypted"
     },
+    "embedMeeting": {
+        "title": "Embed this meeting"
+    },
     "feedback": {
         "average": "Average",
         "bad": "Bad",
@@ -670,6 +674,7 @@
             "chat": "Toggle chat window",
             "document": "Toggle shared document",
             "download": "Download our apps",
+            "embedMeeting": "Embed meeting",
             "e2ee": "End-to-End Encryption",
             "feedback": "Leave feedback",
             "fullScreen": "Toggle full screen",
@@ -718,6 +723,7 @@
         "documentOpen": "Open shared document",
         "download": "Download our apps",
         "e2ee": "End-to-End Encryption",
+        "embedMeeting": "Embed meeting",
         "enterFullScreen": "View full screen",
         "enterTileView": "Enter tile view",
         "exitFullScreen": "Exit full screen",
diff --git a/react/features/base/icons/svg/code-block.svg b/react/features/base/icons/svg/code-block.svg
new file mode 100644
index 0000000000..5c5783b2d5
--- /dev/null
+++ b/react/features/base/icons/svg/code-block.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8716 7.70278C15.4611 7.33332 15.4278 6.70103 15.7972 6.29052C16.1667 5.88001 16.799 5.84673 17.2095 6.21619L22.4652 10.9212C22.9066 11.3184 22.9066 12.0105 22.4652 12.4077L17.2095 17.0394C16.799 17.4089 16.1667 17.3756 15.7972 16.9651C15.4278 16.5546 15.4611 15.9223 15.8716 15.5528L20.3014 11.6645L15.8716 7.70278Z" fill="#A4B8D1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.4651 15.5531C8.87561 15.9225 8.90889 16.5548 8.53943 16.9653C8.16997 17.3759 7.53768 17.4091 7.12717 17.0397L1.87145 12.3347C1.43007 11.9375 1.43007 11.2454 1.87145 10.8481L7.12717 6.21644C7.53768 5.84698 8.16997 5.88026 8.53943 6.29077C8.90889 6.70128 8.87561 7.33357 8.4651 7.70302L4.03526 11.5914L8.4651 15.5531Z" fill="#A4B8D1"/>
+</svg>
diff --git a/react/features/base/icons/svg/index.js b/react/features/base/icons/svg/index.js
index b9f38b58fd..e7f43a4513 100644
--- a/react/features/base/icons/svg/index.js
+++ b/react/features/base/icons/svg/index.js
@@ -20,6 +20,7 @@ export { default as IconCheck } from './check.svg';
 export { default as IconClose } from './close.svg';
 export { default as IconCloseX } from './close-x.svg';
 export { default as IconClosedCaption } from './closed_caption.svg';
+export { default as IconCodeBlock } from './code-block.svg';
 export { default as IconConnectionActive } from './gsm-bars.svg';
 export { default as IconConnectionInactive } from './ninja.svg';
 export { default as IconCopy } from './copy.svg';
diff --git a/react/features/embed-meeting/components/EmbedMeetingDialog.js b/react/features/embed-meeting/components/EmbedMeetingDialog.js
new file mode 100644
index 0000000000..5da5a2caa4
--- /dev/null
+++ b/react/features/embed-meeting/components/EmbedMeetingDialog.js
@@ -0,0 +1,69 @@
+// @flow
+
+import React from 'react';
+import { connect } from 'react-redux';
+
+import CopyButton from '../../base/buttons/CopyButton';
+import { getInviteURL } from '../../base/connection';
+import { Dialog } from '../../base/dialog';
+import { translate } from '../../base/i18n';
+
+import Header from './Header';
+
+type Props = {
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function,
+
+    /**
+     * The URL of the conference.
+     */
+    url: string
+};
+
+/**
+ * Allow users to embed a jitsi meeting in an iframe.
+ *
+ * @returns {React$Element<any>}
+ */
+function EmbedMeeting({ t, url }: Props) {
+    /**
+     * Get the embed code for a jitsi meeting.
+     *
+     * @returns {string} The iframe embed code.
+     */
+    const getEmbedCode = () =>
+        `<iframe allow="camera; microphone; display-capture" src="${url}`
+        + 'allowfullscreen="true" style="height: 100%; width: 100%; border: 0px;"></iframe>';
+
+    return (
+        <Dialog
+            customHeader = { Header }
+            hideCancelButton = { true }
+            submitDisabled = { true }
+            width = 'small'>
+            <div className = 'embed-meeting-dialog'>
+                <textarea
+                    className = 'embed-meeting-code'
+                    readOnly = { true }
+                    value = { getEmbedCode() } />
+                <CopyButton
+                    className = 'embed-meeting-copy'
+                    displayedText = { t('dialog.copy') }
+                    textOnCopySuccess = { t('dialog.copied') }
+                    textOnHover = { t('dialog.copy') }
+                    textToCopy = { getEmbedCode() } />
+            </div>
+        </Dialog>
+    );
+}
+
+const mapStateToProps = state => {
+    return {
+        url: getInviteURL(state)
+    };
+};
+
+export default translate(connect(mapStateToProps)(EmbedMeeting));
diff --git a/react/features/embed-meeting/components/EmbedMeetingTrigger.js b/react/features/embed-meeting/components/EmbedMeetingTrigger.js
new file mode 100644
index 0000000000..b531b0d87d
--- /dev/null
+++ b/react/features/embed-meeting/components/EmbedMeetingTrigger.js
@@ -0,0 +1,50 @@
+// @flow
+
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { openDialog } from '../../base/dialog';
+import { translate } from '../../base/i18n';
+
+import EmbedMeetingDialog from './EmbedMeetingDialog';
+
+type Props = {
+
+    /**
+     * Open the embed meeting dialog
+     */
+    openEmbedDialog: Function,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function,
+};
+
+/**
+ * Component meant to trigger showing the EmbedMeetingDialog.
+ *
+ * @returns {React$Element<any>}
+ */
+function EmbedMeetingTrigger({ t, openEmbedDialog }: Props) {
+    /**
+     * Handles opeming the embed dialog.
+     *
+     * @returns {void}
+     */
+    function onClick() {
+        openEmbedDialog(EmbedMeetingDialog);
+    }
+
+    return (
+        <div
+            className = 'embed-meeting-trigger'
+            onClick = { onClick }>
+            {t('embedMeeting.title')}
+        </div>
+    );
+}
+
+const mapDispatchToProps = { openEmbedDialog: openDialog };
+
+export default translate(connect(null, mapDispatchToProps)(EmbedMeetingTrigger));
diff --git a/react/features/embed-meeting/components/Header.js b/react/features/embed-meeting/components/Header.js
new file mode 100644
index 0000000000..86d4db32d6
--- /dev/null
+++ b/react/features/embed-meeting/components/Header.js
@@ -0,0 +1,38 @@
+// @flow
+
+import React from 'react';
+
+import { translate } from '../../base/i18n';
+import { Icon, IconClose } from '../../base/icons';
+
+type Props = {
+
+    /**
+     * The {@link ModalDialog} closing function.
+     */
+    onClose: Function,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * Custom header of the {@code EmbedMeetingDialog}.
+ *
+ * @returns {React$Element<any>}
+ */
+function Header({ onClose, t }: Props) {
+    return (
+        <div
+            className = 'embed-meeting-dialog-header'>
+            { t('embedMeeting.title') }
+            <Icon
+                onClick = { onClose }
+                src = { IconClose } />
+        </div>
+    );
+}
+
+export default translate(Header);
diff --git a/react/features/embed-meeting/components/index.js b/react/features/embed-meeting/components/index.js
new file mode 100644
index 0000000000..572171561d
--- /dev/null
+++ b/react/features/embed-meeting/components/index.js
@@ -0,0 +1 @@
+export { default as EmbedMeetingDialog } from './EmbedMeetingDialog';
diff --git a/react/features/embed-meeting/index.js b/react/features/embed-meeting/index.js
new file mode 100644
index 0000000000..07635cbbc8
--- /dev/null
+++ b/react/features/embed-meeting/index.js
@@ -0,0 +1 @@
+export * from './components';
diff --git a/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js b/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js
index f3afcfcbfc..cc3112e2a0 100644
--- a/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js
+++ b/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js
@@ -10,6 +10,7 @@ import { translate } from '../../../../base/i18n';
 import { JitsiRecordingConstants } from '../../../../base/lib-jitsi-meet';
 import { getLocalParticipant } from '../../../../base/participants';
 import { connect } from '../../../../base/redux';
+import EmbedMeetingTrigger from '../../../../embed-meeting/components/EmbedMeetingTrigger';
 import { getActiveSession } from '../../../../recording';
 import { updateDialInNumbers } from '../../../actions';
 import { _getDefaultPhoneNumber, getInviteText, isAddPeopleEnabled, isDialOutEnabled } from '../../../functions';
@@ -151,6 +152,8 @@ function AddPeopleDialog({
                 <InviteByEmailSection
                     inviteSubject = { inviteSubject }
                     inviteText = { invite } />
+                <EmbedMeetingTrigger />
+                <div className = 'invite-more-dialog separator' />
                 {
                     _liveStreamViewURL
                         && <LiveStreamSection liveStreamViewURL = { _liveStreamViewURL } />
diff --git a/react/features/invite/components/add-people-dialog/web/InviteByEmailSection.js b/react/features/invite/components/add-people-dialog/web/InviteByEmailSection.js
index 02f1b1eeb9..538d7ba9d6 100644
--- a/react/features/invite/components/add-people-dialog/web/InviteByEmailSection.js
+++ b/react/features/invite/components/add-people-dialog/web/InviteByEmailSection.js
@@ -146,7 +146,6 @@ function InviteByEmailSection({ inviteSubject, inviteText, t }: Props) {
                     {renderEmailIcons()}
                 </div>
             </div>
-            <div className = 'invite-more-dialog separator' />
         </>
     );
 }
diff --git a/react/features/toolbox/components/web/Toolbox.js b/react/features/toolbox/components/web/Toolbox.js
index 2a80fb2cf4..c7695bd0a7 100644
--- a/react/features/toolbox/components/web/Toolbox.js
+++ b/react/features/toolbox/components/web/Toolbox.js
@@ -12,6 +12,7 @@ import { openDialog, toggleDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
 import {
     IconChat,
+    IconCodeBlock,
     IconExitFullScreen,
     IconFeedback,
     IconFullScreen,
@@ -33,6 +34,7 @@ import { OverflowMenuItem } from '../../../base/toolbox';
 import { getLocalVideoTrack, toggleScreensharing } from '../../../base/tracks';
 import { VideoBlurButton } from '../../../blur';
 import { CHAT_SIZE, ChatCounter, toggleChat } from '../../../chat';
+import { EmbedMeetingDialog } from '../../../embed-meeting';
 import { SharedDocumentButton } from '../../../etherpad';
 import { openFeedbackDialog } from '../../../feedback';
 import { beginAddPeople } from '../../../invite';
@@ -237,6 +239,7 @@ class Toolbox extends Component<Props, State> {
         this._onToolbarOpenInvite = this._onToolbarOpenInvite.bind(this);
         this._onToolbarOpenKeyboardShortcuts = this._onToolbarOpenKeyboardShortcuts.bind(this);
         this._onToolbarOpenSpeakerStats = this._onToolbarOpenSpeakerStats.bind(this);
+        this._onToolbarOpenEmbedMeeting = this._onToolbarOpenEmbedMeeting.bind(this);
         this._onToolbarOpenVideoQuality = this._onToolbarOpenVideoQuality.bind(this);
         this._onToolbarToggleChat = this._onToolbarToggleChat.bind(this);
         this._onToolbarToggleFullScreen = this._onToolbarToggleFullScreen.bind(this);
@@ -376,6 +379,16 @@ class Toolbox extends Component<Props, State> {
         this.props.dispatch(openFeedbackDialog(_conference));
     }
 
+    /**
+     * Callback invoked to display {@code FeedbackDialog}.
+     *
+     * @private
+     * @returns {void}
+     */
+    _doOpenEmbedMeeting() {
+        this.props.dispatch(openDialog(EmbedMeetingDialog));
+    }
+
     /**
      * Dispatches an action to display {@code KeyboardShortcuts}.
      *
@@ -717,6 +730,21 @@ class Toolbox extends Component<Props, State> {
         this._doOpenKeyboardShorcuts();
     }
 
+    _onToolbarOpenEmbedMeeting: () => void;
+
+    /**
+     * Creates an analytics toolbar event and dispatches an action for opening
+     * the embed meeting modal.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onToolbarOpenEmbedMeeting() {
+        sendAnalytics(createToolbarEvent('embed.meeting'));
+
+        this._doOpenEmbedMeeting();
+    }
+
     _onToolbarOpenSpeakerStats: () => void;
 
     /**
@@ -1017,6 +1045,13 @@ class Toolbox extends Component<Props, State> {
                     key = 'stats'
                     onClick = { this._onToolbarOpenSpeakerStats }
                     text = { t('toolbar.speakerStats') } />,
+            this._shouldShowButton('embedmeeting')
+                && <OverflowMenuItem
+                    accessibilityLabel = { t('toolbar.accessibilityLabel.embedMeeting') }
+                    icon = { IconCodeBlock }
+                    key = 'embed'
+                    onClick = { this._onToolbarOpenEmbedMeeting }
+                    text = { t('toolbar.embedMeeting') } />,
             this._shouldShowButton('feedback')
                 && _feedbackConfigured
                 && <OverflowMenuItem