Add initial jitsi call code
This commit is contained in:
parent
e446fc47ce
commit
ed6ec55578
7 changed files with 94 additions and 19 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -4,3 +4,5 @@ node_modules
|
||||||
devAssets
|
devAssets
|
||||||
|
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|
||||||
|
/.history/
|
||||||
|
|
10
package-lock.json
generated
10
package-lock.json
generated
|
@ -11,6 +11,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fontsource/inter": "4.5.14",
|
"@fontsource/inter": "4.5.14",
|
||||||
"@fontsource/roboto": "4.5.8",
|
"@fontsource/roboto": "4.5.8",
|
||||||
|
"@jitsi/react-sdk": "1.3.0",
|
||||||
"@khanacademy/simple-markdown": "0.8.6",
|
"@khanacademy/simple-markdown": "0.8.6",
|
||||||
"@matrix-org/olm": "3.2.14",
|
"@matrix-org/olm": "3.2.14",
|
||||||
"@tippyjs/react": "4.2.6",
|
"@tippyjs/react": "4.2.6",
|
||||||
|
@ -899,6 +900,15 @@
|
||||||
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
|
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@jitsi/react-sdk": {
|
||||||
|
"version": "1.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jitsi/react-sdk/-/react-sdk-1.3.0.tgz",
|
||||||
|
"integrity": "sha512-f+xtk/j0iXIMJscJeGt3OXnocFeG1pX6OMjv7H/9AaTnCUNsDc/jfDSPme+h0RmdymzJdkSwyHjmkhDK9aehzw==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "16 || 17 || 18",
|
||||||
|
"react-dom": "16 || 17 || 18"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@jridgewell/gen-mapping": {
|
"node_modules/@jridgewell/gen-mapping": {
|
||||||
"version": "0.1.1",
|
"version": "0.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
|
||||||
|
|
|
@ -21,6 +21,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fontsource/inter": "4.5.14",
|
"@fontsource/inter": "4.5.14",
|
||||||
"@fontsource/roboto": "4.5.8",
|
"@fontsource/roboto": "4.5.8",
|
||||||
|
"@jitsi/react-sdk": "1.3.0",
|
||||||
"@khanacademy/simple-markdown": "0.8.6",
|
"@khanacademy/simple-markdown": "0.8.6",
|
||||||
"@matrix-org/olm": "3.2.14",
|
"@matrix-org/olm": "3.2.14",
|
||||||
"@tippyjs/react": "4.2.6",
|
"@tippyjs/react": "4.2.6",
|
||||||
|
|
|
@ -36,6 +36,7 @@ import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
|
||||||
function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
|
function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
|
||||||
const [joinRule, setJoinRule] = useState(parentId ? 'restricted' : 'invite');
|
const [joinRule, setJoinRule] = useState(parentId ? 'restricted' : 'invite');
|
||||||
const [isEncrypted, setIsEncrypted] = useState(true);
|
const [isEncrypted, setIsEncrypted] = useState(true);
|
||||||
|
const [isVideoRoom, setIsVideoRoom] = useState(false);
|
||||||
const [isCreatingRoom, setIsCreatingRoom] = useState(false);
|
const [isCreatingRoom, setIsCreatingRoom] = useState(false);
|
||||||
const [creatingError, setCreatingError] = useState(null);
|
const [creatingError, setCreatingError] = useState(null);
|
||||||
|
|
||||||
|
@ -76,8 +77,11 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
|
||||||
setCreatingError(null);
|
setCreatingError(null);
|
||||||
|
|
||||||
const name = target.name.value;
|
const name = target.name.value;
|
||||||
let topic = target.topic.value;
|
let topic = target.topic?.value;
|
||||||
if (topic.trim() === '') topic = undefined;
|
if (topic && topic.trim() === '') topic = undefined;
|
||||||
|
if (isVideoRoom) {
|
||||||
|
topic = 'd38dd491fefa1cfffc27f9c57f2bdb4a';
|
||||||
|
}
|
||||||
let roomAlias;
|
let roomAlias;
|
||||||
if (joinRule === 'public') {
|
if (joinRule === 'public') {
|
||||||
roomAlias = addressRef?.current?.value;
|
roomAlias = addressRef?.current?.value;
|
||||||
|
@ -92,7 +96,7 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
|
||||||
topic,
|
topic,
|
||||||
joinRule,
|
joinRule,
|
||||||
alias: roomAlias,
|
alias: roomAlias,
|
||||||
isEncrypted: (isSpace || joinRule === 'public') ? false : isEncrypted,
|
isEncrypted: isSpace || joinRule === 'public' ? false : isEncrypted,
|
||||||
powerLevel,
|
powerLevel,
|
||||||
isSpace,
|
isSpace,
|
||||||
parentId,
|
parentId,
|
||||||
|
@ -168,52 +172,73 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
|
||||||
<form className="create-room__form" onSubmit={handleSubmit}>
|
<form className="create-room__form" onSubmit={handleSubmit}>
|
||||||
<SettingTile
|
<SettingTile
|
||||||
title="Visibility"
|
title="Visibility"
|
||||||
options={(
|
options={
|
||||||
<Button onClick={handleJoinRule} iconSrc={ChevronBottomIC}>
|
<Button onClick={handleJoinRule} iconSrc={ChevronBottomIC}>
|
||||||
{joinRuleShortText[joinRules.indexOf(joinRule)]}
|
{joinRuleShortText[joinRules.indexOf(joinRule)]}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
}
|
||||||
content={<Text variant="b3">{`Select who can join this ${isSpace ? 'space' : 'room'}.`}</Text>}
|
content={
|
||||||
|
<Text variant="b3">{`Select who can join this ${isSpace ? 'space' : 'room'}.`}</Text>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
{joinRule === 'public' && (
|
{joinRule === 'public' && (
|
||||||
<div>
|
<div>
|
||||||
<Text className="create-room__address__label" variant="b2">{isSpace ? 'Space address' : 'Room address'}</Text>
|
<Text className="create-room__address__label" variant="b2">
|
||||||
|
{isSpace ? 'Space address' : 'Room address'}
|
||||||
|
</Text>
|
||||||
<div className="create-room__address">
|
<div className="create-room__address">
|
||||||
<Text variant="b1">#</Text>
|
<Text variant="b1">#</Text>
|
||||||
<Input
|
<Input
|
||||||
value={addressValue}
|
value={addressValue}
|
||||||
onChange={validateAddress}
|
onChange={validateAddress}
|
||||||
state={(isValidAddress === false) ? 'error' : 'normal'}
|
state={isValidAddress === false ? 'error' : 'normal'}
|
||||||
forwardRef={addressRef}
|
forwardRef={addressRef}
|
||||||
placeholder="my_address"
|
placeholder="my_address"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<Text variant="b1">{`:${userHs}`}</Text>
|
<Text variant="b1">{`:${userHs}`}</Text>
|
||||||
</div>
|
</div>
|
||||||
{isValidAddress === false && <Text className="create-room__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}:${userHs} is already in use`}</span></Text>}
|
{isValidAddress === false && (
|
||||||
|
<Text className="create-room__address__tip" variant="b3">
|
||||||
|
<span
|
||||||
|
style={{ color: 'var(--bg-danger)' }}
|
||||||
|
>{`#${addressValue}:${userHs} is already in use`}</span>
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{!isSpace && joinRule !== 'public' && (
|
{!isSpace && joinRule !== 'public' && (
|
||||||
<SettingTile
|
<SettingTile
|
||||||
title="Enable end-to-end encryption"
|
title="Enable end-to-end encryption"
|
||||||
options={<Toggle isActive={isEncrypted} onToggle={setIsEncrypted} />}
|
options={<Toggle isActive={isEncrypted} onToggle={setIsEncrypted} />}
|
||||||
content={<Text variant="b3">You can’t disable this later. Bridges & most bots won’t work yet.</Text>}
|
content={
|
||||||
|
<Text variant="b3">
|
||||||
|
You can’t disable this later. Bridges & most bots won’t work yet.
|
||||||
|
</Text>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
<SettingTile
|
||||||
|
title="Video room"
|
||||||
|
options={<Toggle isActive={isVideoRoom} onToggle={setIsVideoRoom} />}
|
||||||
|
content={<Text variant="b3">Use jitsi for voice/video calls</Text>}
|
||||||
|
/>
|
||||||
<SettingTile
|
<SettingTile
|
||||||
title="Select your role"
|
title="Select your role"
|
||||||
options={(
|
options={
|
||||||
<SegmentControl
|
<SegmentControl
|
||||||
selected={roleIndex}
|
selected={roleIndex}
|
||||||
segments={[{ text: 'Admin' }, { text: 'Founder' }]}
|
segments={[{ text: 'Admin' }, { text: 'Founder' }]}
|
||||||
onSelect={setRoleIndex}
|
onSelect={setRoleIndex}
|
||||||
/>
|
/>
|
||||||
)}
|
}
|
||||||
content={(
|
content={
|
||||||
<Text variant="b3">Selecting Admin sets 100 power level whereas Founder sets 101.</Text>
|
<Text variant="b3">Selecting Admin sets 100 power level whereas Founder sets 101.</Text>
|
||||||
)}
|
}
|
||||||
/>
|
/>
|
||||||
<Input name="topic" minHeight={174} resizable label="Topic (optional)" />
|
{!isVideoRoom && (
|
||||||
|
<Input name="topic" minHeight={174} resizable label="Topic (optional)" />
|
||||||
|
)}
|
||||||
<div className="create-room__name-wrapper">
|
<div className="create-room__name-wrapper">
|
||||||
<Input name="name" label={`${isSpace ? 'Space' : 'Room'} name`} required />
|
<Input name="name" label={`${isSpace ? 'Space' : 'Room'} name`} required />
|
||||||
<Button
|
<Button
|
||||||
|
@ -231,7 +256,11 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
|
||||||
<Text>{`Creating ${isSpace ? 'space' : 'room'}...`}</Text>
|
<Text>{`Creating ${isSpace ? 'space' : 'room'}...`}</Text>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{typeof creatingError === 'string' && <Text className="create-room__error" variant="b3">{creatingError}</Text>}
|
{typeof creatingError === 'string' && (
|
||||||
|
<Text className="create-room__error" variant="b3">
|
||||||
|
{creatingError}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import './Room.scss';
|
import './Room.scss';
|
||||||
|
import { JitsiMeeting } from '@jitsi/react-sdk';
|
||||||
|
|
||||||
import initMatrix from '../../../client/initMatrix';
|
import initMatrix from '../../../client/initMatrix';
|
||||||
import cons from '../../../client/state/cons';
|
import cons from '../../../client/state/cons';
|
||||||
|
@ -12,6 +13,7 @@ import Welcome from '../welcome/Welcome';
|
||||||
import RoomView from './RoomView';
|
import RoomView from './RoomView';
|
||||||
import RoomSettings from './RoomSettings';
|
import RoomSettings from './RoomSettings';
|
||||||
import PeopleDrawer from './PeopleDrawer';
|
import PeopleDrawer from './PeopleDrawer';
|
||||||
|
import { getUsername } from '../../../util/matrixUtil';
|
||||||
|
|
||||||
function Room() {
|
function Room() {
|
||||||
const [roomInfo, setRoomInfo] = useState({
|
const [roomInfo, setRoomInfo] = useState({
|
||||||
|
@ -59,6 +61,34 @@ function Room() {
|
||||||
return <Welcome />;
|
return <Welcome />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic ===
|
||||||
|
'd38dd491fefa1cfffc27f9c57f2bdb4a'
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<JitsiMeeting
|
||||||
|
domain="meet.calyx.net"
|
||||||
|
roomName={roomTimeline.roomName}
|
||||||
|
configOverwrite={{
|
||||||
|
startWithAudioMuted: true,
|
||||||
|
disableModeratorIndicator: true,
|
||||||
|
startScreenSharing: true,
|
||||||
|
enableEmailInStats: false,
|
||||||
|
}}
|
||||||
|
interfaceConfigOverwrite={{
|
||||||
|
DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
|
||||||
|
}}
|
||||||
|
userInfo={{
|
||||||
|
displayName: getUsername(mx.getUserId()),
|
||||||
|
}}
|
||||||
|
onApiReady={(externalApi) => {
|
||||||
|
// here you can attach custom event listeners to the Jitsi Meet External API
|
||||||
|
// you can also store it locally to execute commands
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="room">
|
<div className="room">
|
||||||
<div className="room__content">
|
<div className="room__content">
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
@use '../../partials/screen';
|
@use '../../partials/screen';
|
||||||
|
@use '../../partials/flex';
|
||||||
|
|
||||||
.client-container {
|
.client-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -14,8 +15,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.room__wrapper {
|
.room__wrapper {
|
||||||
flex: 1;
|
display:grid;
|
||||||
min-width: 0;
|
@extend .cp-fx__item-one;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include screen.smallerThan(mobileBreakpoint) {
|
@include screen.smallerThan(mobileBreakpoint) {
|
||||||
|
|
|
@ -88,6 +88,8 @@ class RoomTimeline extends EventEmitter {
|
||||||
this.matrixClient = initMatrix.matrixClient;
|
this.matrixClient = initMatrix.matrixClient;
|
||||||
this.roomId = roomId;
|
this.roomId = roomId;
|
||||||
this.room = this.matrixClient.getRoom(roomId);
|
this.room = this.matrixClient.getRoom(roomId);
|
||||||
|
this.roomName = this.matrixClient.getRoom(roomId).name;
|
||||||
|
this.roomTopic = this.matrixClient.getRoom(roomId).topic;
|
||||||
|
|
||||||
this.liveTimeline = this.room.getLiveTimeline();
|
this.liveTimeline = this.room.getLiveTimeline();
|
||||||
this.activeTimeline = this.liveTimeline;
|
this.activeTimeline = this.liveTimeline;
|
||||||
|
|
Loading…
Reference in a new issue