LPC2022 new Matrix to BBB integration component

Author: glunardi

bigbluebutton-html5/imports/api/pads/server/helpers.js

@@ -2,6 +2,7 @@ import RedisPubSub from '/imports/startup/server/redis';
 import { Meteor } from 'meteor/meteor';
 import Logger from '/imports/startup/server/logger';
 
+const MATRIX_CONFIG = Meteor.settings.public.matrix;
 const NOTES_CONFIG = Meteor.settings.public.notes;
 const CAPTIONS_CONFIG = Meteor.settings.public.captions;
 const REDIS_CONFIG = Meteor.settings.private.redis;
@@ -11,6 +12,7 @@ const TOKEN = '$';
 const models = {
   CAPTIONS: CAPTIONS_CONFIG.id,
   NOTES: NOTES_CONFIG.id,
+  MATRIX: MATRIX_CONFIG.id,
 };
 
 const getDataFromChangeset = (changeset) => {

bigbluebutton-html5/imports/ui/components/layout/enums.js

@@ -105,6 +105,7 @@ export const PANELS = {
   POLL: 'poll',
   CAPTIONS: 'captions',
   BREAKOUT: 'breakoutroom',
+  MATRIX: 'matrix',
   SHARED_NOTES: 'shared-notes',
   TIMER: 'timer',
   WAITING_USERS: 'waiting-users',

bigbluebutton-html5/imports/ui/components/matrix/component.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
+import Styled from './styles';
+import Auth from '/imports/ui/services/auth';
+import getFromUserSettings from '/imports/ui/services/users-settings';
+import Meetings from '/imports/api/meetings';
+import { PANELS, ACTIONS } from '../layout/enums';
+import Header from '/imports/ui/components/common/control-header/component';
+import browserInfo from '/imports/utils/browserInfo';
+
+const intlMessages = defineMessages({
+  hide: {
+    id: 'app.matrix.hide',
+    description: 'Label for hiding matrix button',
+  },
+  title: {
+    id: 'app.matrix.title',
+    description: 'Title for Matrix',
+  },
+  tipLabel: {
+    id: 'app.matrix.tipLabel',
+    description: 'Label for tip on how to escape iframe',
+  },
+});
+
+const propTypes = {
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
+  isResizing: PropTypes.bool.isRequired,
+  layoutContextDispatch: PropTypes.func.isRequired,
+};
+
+const Matrix = ({
+  intl,
+  layoutContextDispatch,
+  isResizing,
+}) => {
+  const { isChrome } = browserInfo;
+
+  const prop = Meetings.findOne(
+    { meetingId: Auth.meetingID },
+    { fields: { metadataProp: 1 } },
+  ).metadataProp;
+
+  const matrixRoomID = prop.metadata ? prop.metadata.matrixroomid : null;
+  const urlemail = getFromUserSettings('mail', 'failed-to-retrieve-mail');
+  const urlregcode = getFromUserSettings('regcode', 'failed-to-retrieve-regcode');
+  const matrixtitle = `Matrix integration for ${Auth.confname}`;
+  const matrixurl = `/riot-embedded/index.html?urlroomid=${matrixRoomID}&urlemail=${urlemail}&urlregcode=${urlregcode}`;
+
+  return (
+    <Styled.Matrix data-test="matrix" isChrome={isChrome}>
+      <Header
+        leftButtonProps={{
+          onClick: () => {
+            layoutContextDispatch({
+              type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
+              value: false,
+            });
+            layoutContextDispatch({
+              type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
+              value: PANELS.NONE,
+            });
+          },
+          'data-test': 'hide',
+          'aria-label': intl.formatMessage(intlMessages.hide),
+          label: intl.formatMessage(intlMessages.title),
+        }}
+      />
+      <Styled.IFrame
+        title={matrixtitle}
+        src={matrixurl}
+        aria-describedby="MatrixEscapeHint"
+        style={{
+          pointerEvents: isResizing ? 'none' : 'inherit',
+        }}
+      />
+      <Styled.Hint
+        id="MatrixEscapeHint"
+        aria-hidden
+      >
+        {intl.formatMessage(intlMessages.tipLabel)}
+      </Styled.Hint>
+    </Styled.Matrix>
+  );
+};
+
+Matrix.propTypes = propTypes;
+
+export default injectWbResizeEvent(injectIntl(Matrix));

bigbluebutton-html5/imports/ui/components/matrix/container.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { withTracker } from 'meteor/react-meteor-data';
+import Matrix from './component';
+import Service from './service';
+import { layoutSelectInput, layoutDispatch } from '../layout/context';
+
+const MatrixContainer = ({ ...props }) => {
+  const cameraDock = layoutSelectInput((i) => i.cameraDock);
+  const { isResizing } = cameraDock;
+  const layoutContextDispatch = layoutDispatch();
+
+  return <Matrix {...{ layoutContextDispatch, isResizing, ...props }} />;
+};
+
+export default withTracker(() => {
+  const isLocked = Service.isLocked();
+  const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
+
+  return {
+    isLocked,
+    isRTL,
+  };
+})(MatrixContainer);

bigbluebutton-html5/imports/ui/components/matrix/service.js

@@ -0,0 +1,41 @@
+import Users from '/imports/api/users';
+import Meetings from '/imports/api/meetings';
+import Auth from '/imports/ui/services/auth';
+import { ACTIONS, PANELS } from '/imports/ui/components/layout/enums';
+import { isMatrixEnabled } from '/imports/ui/services/features';
+
+const MATRIX_CONFIG = Meteor.settings.public.matrix;
+const ROLE_MODERATOR = Meteor.settings.public.user.role_moderator;
+
+const isLocked = () => {
+  const meeting = Meetings.findOne({ meetingId: Auth.meetingID }, { fields: { 'lockSettingsProps.disableMatrix': 1 } });
+  const user = Users.findOne({ userId: Auth.userID }, { fields: { locked: 1, role: 1 } });
+
+  if (meeting.lockSettingsProps && user.role !== ROLE_MODERATOR && user.locked) {
+    return meeting.lockSettingsProps.disableMatrix;
+  }
+  return false;
+};
+
+const isEnabled = () => isMatrixEnabled();
+
+const toggleMatrixPanel = (sidebarContentPanel, layoutContextDispatch) => {
+  layoutContextDispatch({
+    type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
+    value: sidebarContentPanel !== PANELS.MATRIX,
+  });
+  layoutContextDispatch({
+    type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
+    value:
+      sidebarContentPanel === PANELS.MATRIX
+        ? PANELS.NONE
+        : PANELS.MATRIX,
+  });
+};
+
+export default {
+  ID: MATRIX_CONFIG.id,
+  toggleMatrixPanel,
+  isLocked,
+  isEnabled,
+};

bigbluebutton-html5/imports/ui/components/matrix/styles.js

@@ -0,0 +1,65 @@
+import styled from 'styled-components';
+import {
+  mdPaddingX,
+  mdPaddingY,
+  smPaddingX,
+  lgPaddingY,
+} from '/imports/ui/stylesheets/styled-components/general';
+import {
+  colorWhite,
+  colorGray,
+  colorGrayLightest,
+} from '/imports/ui/stylesheets/styled-components/palette';
+import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
+import { fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography';
+
+const Matrix = styled.div`
+  background-color: ${colorWhite};
+  padding: ${mdPaddingX} ${mdPaddingY} ${mdPaddingX} ${mdPaddingX};
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+
+  ${({ isChrome }) => isChrome && `
+    transform: translateZ(0);
+  `}
+
+  @media ${smallOnly} {
+    transform: none !important;
+  }
+`;
+
+const Hint = styled.span`
+  visibility: hidden;
+  position: absolute;
+  @media (pointer: none) {
+    visibility: visible;
+    position: relative;
+    color: ${colorGray};
+    font-size: ${fontSizeSmall};
+    font-style: italic;
+    padding: ${smPaddingX} 0 0 ${smPaddingX};
+    text-align: left;
+    [dir="rtl"] & {
+      padding-right: ${lgPaddingY} ${lgPaddingY} 0 0;
+      text-align: right;
+    }
+  }
+`;
+
+const IFrame = styled.iframe`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-style: none;
+  border-bottom: 1px solid ${colorGrayLightest};
+  padding-bottom: 5px;
+`;
+
+export default {
+  Matrix,
+  Hint,
+  IFrame,
+};

bigbluebutton-html5/imports/ui/components/sidebar-content/component.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Resizable from 're-resizable';
 import { ACTIONS, PANELS } from '../layout/enums';
 import ChatContainer from '/imports/ui/components/chat/container';
+import MatrixContainer from '/imports/ui/components/matrix/container';
 import NotesContainer from '/imports/ui/components/notes/container';
 import PollContainer from '/imports/ui/components/poll/container';
 import CaptionsContainer from '/imports/ui/components/captions/container';
@@ -141,6 +142,8 @@ const SidebarContent = (props) => {
           isToSharedNotesBeShow={sidebarContentPanel === PANELS.SHARED_NOTES}
         />
       )}
+      {sidebarContentPanel === PANELS.MATRIX && <MatrixContainer />}
+      {sidebarContentPanel === PANELS.SHARED_NOTES && <NotesContainer />}
       {sidebarContentPanel === PANELS.CAPTIONS && <CaptionsContainer />}
       {sidebarContentPanel === PANELS.BREAKOUT && <BreakoutRoomContainer />}
       {sidebarContentPanel === PANELS.TIMER && <TimerContainer />}

bigbluebutton-html5/imports/ui/components/user-list/service.js

@@ -381,6 +381,7 @@ const isMeetingLocked = (id) => {
       || lockSettings.disableMic
       || lockSettings.disablePrivateChat
       || lockSettings.disablePublicChat
+      || lockSettings.disableMatrix
       || lockSettings.disableNotes
       || lockSettings.hideUserList
       || lockSettings.hideViewersCursor

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/component.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Styled from './styles';
 import UserParticipantsContainer from './user-participants/container';
 import UserMessagesContainer from './user-messages/container';
+import UserMatrixContainer from './user-matrix/container';
 import UserNotesContainer from './user-notes/container';
 import TimerContainer from './timer/container';
 import UserCaptionsContainer from './user-captions/container';
@@ -37,6 +38,7 @@ class UserContent extends PureComponent {
       <Styled.Content data-test="userListContent">
         {isChatEnabled() ? <UserMessagesContainer /> : null}
         <UserCaptionsContainer />
+        <UserMatrixContainer />
         <UserNotesContainer />
         { isTimerActive && (
           <TimerContainer

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-matrix/component.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import Icon from '/imports/ui/components/common/icon/component';
+import Styled from './styles';
+import { ACTIONS, PANELS } from '../../../layout/enums';
+
+const intlMessages = defineMessages({
+  title: {
+    id: 'app.userList.matrixTitle',
+    description: 'Title for the Matrix chat',
+  },
+  Matrix: {
+    id: 'app.matrix.title',
+    description: 'Title for the LPC 2022 chat',
+  },
+  locked: {
+    id: 'app.matrix.locked',
+    description: '',
+  },
+});
+
+const UserMatrix = ({
+  intl,
+  disableMatrix,
+  sidebarContentPanel,
+  layoutContextDispatch,
+}) => {
+  if (disableMatrix) return null;
+
+  const handleClickToggleMatrix = () => {
+    layoutContextDispatch({
+      type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
+      value: sidebarContentPanel !== PANELS.MATRIX,
+    });
+    layoutContextDispatch({
+      type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
+      value: sidebarContentPanel === PANELS.MATRIX
+        ? PANELS.NONE
+        : PANELS.MATRIX,
+    });
+  };
+
+  return (
+    <Styled.Messages>
+      <Styled.Container>
+        <Styled.SmallTitle>
+          {intl.formatMessage(intlMessages.title)}
+        </Styled.SmallTitle>
+      </Styled.Container>
+      <Styled.List>
+        <Styled.ScrollableList>
+          <Styled.ListItem
+            role="button"
+            tabIndex={0}
+            data-test="matrixMenuButton"
+            onClick={handleClickToggleMatrix}
+            onKeyPress={() => {}}
+          >
+            <Icon iconName="group_chat" />
+            <span>{intl.formatMessage(intlMessages.Matrix)}</span>
+          </Styled.ListItem>
+        </Styled.ScrollableList>
+      </Styled.List>
+    </Styled.Messages>
+  );
+};
+
+export default injectIntl(UserMatrix);
+
+UserMatrix.propTypes = {
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
+  disableMatrix: PropTypes.bool.isRequired,
+  layoutContextDispatch: PropTypes.func.isRequired,
+  sidebarContentPanel: PropTypes.string.isRequired,
+};