michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Add initial jitsi call code

Browse source
This commit is contained in:
IceDBorn 2023-03-20 11:00:26 +02:00
parent e446fc47ce
commit ed6ec55578
7 changed files with 94 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -4,3 +4,5 @@ node_modules
devAssets
.DS_Store
/.history/

10
package-lock.json generated
View file

@ -11,6 +11,7 @@
"dependencies": {
"@fontsource/inter": "4.5.14",
"@fontsource/roboto": "4.5.8",
"@jitsi/react-sdk": "1.3.0",
"@khanacademy/simple-markdown": "0.8.6",
"@matrix-org/olm": "3.2.14",
"@tippyjs/react": "4.2.6",
@ -899,6 +900,15 @@
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
"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": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",

1
package.json
View file

@ -21,6 +21,7 @@
"dependencies": {
"@fontsource/inter": "4.5.14",
"@fontsource/roboto": "4.5.8",
"@jitsi/react-sdk": "1.3.0",
"@khanacademy/simple-markdown": "0.8.6",
"@matrix-org/olm": "3.2.14",
"@tippyjs/react": "4.2.6",

61
src/app/organisms/create-room/CreateRoom.jsx
View file

@ -36,6 +36,7 @@ import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
const [joinRule, setJoinRule] = useState(parentId ? 'restricted' : 'invite');
const [isEncrypted, setIsEncrypted] = useState(true);
const [isVideoRoom, setIsVideoRoom] = useState(false);
const [isCreatingRoom, setIsCreatingRoom] = useState(false);
const [creatingError, setCreatingError] = useState(null);
@ -76,8 +77,11 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
setCreatingError(null);
const name = target.name.value;
let topic = target.topic.value;
if (topic.trim() === '') topic = undefined;
let topic = target.topic?.value;
if (topic && topic.trim() === '') topic = undefined;
if (isVideoRoom) {
topic = 'd38dd491fefa1cfffc27f9c57f2bdb4a';
}
let roomAlias;
if (joinRule === 'public') {
roomAlias = addressRef?.current?.value;
@ -92,7 +96,7 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
topic,
joinRule,
alias: roomAlias,
isEncrypted: (isSpace || joinRule === 'public') ? false : isEncrypted,
isEncrypted: isSpace || joinRule === 'public' ? false : isEncrypted,
powerLevel,
isSpace,
parentId,
@ -168,52 +172,73 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
<form className="create-room__form" onSubmit={handleSubmit}>
<SettingTile
title="Visibility"
options={(
options={
<Button onClick={handleJoinRule} iconSrc={ChevronBottomIC}>
{joinRuleShortText[joinRules.indexOf(joinRule)]}
</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' && (
<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">
<Text variant="b1">#</Text>
<Input
value={addressValue}
onChange={validateAddress}
state={(isValidAddress === false) ? 'error' : 'normal'}
state={isValidAddress === false ? 'error' : 'normal'}
forwardRef={addressRef}
placeholder="my_address"
required
/>
<Text variant="b1">{`:${userHs}`}</Text>
</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>
)}
{!isSpace && joinRule !== 'public' && (
<SettingTile
title="Enable end-to-end encryption"
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
title="Select your role"
options={(
options={
<SegmentControl
selected={roleIndex}
segments={[{ text: 'Admin' }, { text: 'Founder' }]}
onSelect={setRoleIndex}
/>
)}
content={(
}
content={
<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">
<Input name="name" label={`${isSpace ? 'Space' : 'Room'} name`} required />
<Button
@ -231,7 +256,11 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
<Text>{`Creating ${isSpace ? 'space' : 'room'}...`}</Text>
</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>
</div>
);

30
src/app/organisms/room/Room.jsx
View file

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react';
import './Room.scss';
import { JitsiMeeting } from '@jitsi/react-sdk';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
@ -12,6 +13,7 @@ import Welcome from '../welcome/Welcome';
import RoomView from './RoomView';
import RoomSettings from './RoomSettings';
import PeopleDrawer from './PeopleDrawer';
import { getUsername } from '../../../util/matrixUtil';
function Room() {
const [roomInfo, setRoomInfo] = useState({
@ -59,6 +61,34 @@ function Room() {
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 (
<div className="room">
<div className="room__content">

7
src/app/templates/client/Client.scss
View file

@ -1,4 +1,5 @@
@use '../../partials/screen';
@use '../../partials/flex';
.client-container {
display: flex;
@ -7,15 +8,15 @@
.navigation__wrapper {
width: var(--navigation-width);
@include screen.smallerThan(mobileBreakpoint) {
width: 100%;
}
}
.room__wrapper {
flex: 1;
min-width: 0;
display:grid;
@extend .cp-fx__item-one;
}
@include screen.smallerThan(mobileBreakpoint) {

2
src/client/state/RoomTimeline.js
View file

@ -88,6 +88,8 @@ class RoomTimeline extends EventEmitter {
this.matrixClient = initMatrix.matrixClient;
this.roomId = 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.activeTimeline = this.liveTimeline;