Move voice channel switching logic to navigation

This commit is contained in:
IceDBorn 2023-03-25 03:36:08 +02:00
parent dde59f3596
commit 70796e2d0b
6 changed files with 93 additions and 55 deletions

View file

@ -36,7 +36,7 @@ function useSystemState() {
return [systemState]; return [systemState];
} }
function Drawer() { function Drawer({jitsiCallId}) {
const [systemState] = useSystemState(); const [systemState] = useSystemState();
const [selectedTab] = useSelectedTab(); const [selectedTab] = useSelectedTab();
const [spaceId] = useSelectedSpace(); const [spaceId] = useSelectedSpace();
@ -72,16 +72,16 @@ function Drawer() {
<div className="rooms__wrapper"> <div className="rooms__wrapper">
<ScrollView ref={scrollRef} autoHide> <ScrollView ref={scrollRef} autoHide>
<div className="rooms-container"> <div className="rooms-container">
{ {selectedTab !== cons.tabs.DIRECTS ? (
selectedTab !== cons.tabs.DIRECTS <Home spaceId={spaceId} jitsiCallId={jitsiCallId} />
? <Home spaceId={spaceId} /> ) : (
: <Directs size={roomList.directs.size} /> <Directs size={roomList.directs.size} />
} )}
</div> </div>
</ScrollView> </ScrollView>
</div> </div>
</div> </div>
{ systemState !== null && ( {systemState !== null && (
<div className="drawer__state"> <div className="drawer__state">
<Text>{systemState.status}</Text> <Text>{systemState.status}</Text>
</div> </div>

View file

@ -12,7 +12,7 @@ import RoomsCategory from './RoomsCategory';
import { useCategorizedSpaces } from '../../hooks/useCategorizedSpaces'; import { useCategorizedSpaces } from '../../hooks/useCategorizedSpaces';
const drawerPostie = new Postie(); const drawerPostie = new Postie();
function Home({ spaceId }) { function Home({ spaceId, jitsiCallId }) {
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
const { roomList, notifications, accountData } = initMatrix; const { roomList, notifications, accountData } = initMatrix;
const { spaces, rooms, directs } = roomList; const { spaces, rooms, directs } = roomList;
@ -68,37 +68,51 @@ function Home({ spaceId }) {
return ( return (
<> <>
{ !isCategorized && spaceIds.length !== 0 && ( {!isCategorized && spaceIds.length !== 0 && (
<RoomsCategory name="Spaces" roomIds={spaceIds.sort(roomIdByAtoZ)} drawerPostie={drawerPostie} /> <RoomsCategory
name="Spaces"
roomIds={spaceIds.sort(roomIdByAtoZ)}
drawerPostie={drawerPostie}
/>
)} )}
{ roomIds.length !== 0 && ( {roomIds.length !== 0 && (
<RoomsCategory name="Rooms" roomIds={roomIds.sort(roomIdByAtoZ)} drawerPostie={drawerPostie} /> <RoomsCategory
name="Rooms"
roomIds={roomIds.sort(roomIdByAtoZ)}
drawerPostie={drawerPostie}
jitsiCallId={jitsiCallId}
/>
)} )}
{ directIds.length !== 0 && ( {directIds.length !== 0 && (
<RoomsCategory name="People" roomIds={directIds.sort(roomIdByActivity)} drawerPostie={drawerPostie} /> <RoomsCategory
name="People"
roomIds={directIds.sort(roomIdByActivity)}
drawerPostie={drawerPostie}
/>
)} )}
{ isCategorized && [...categories.keys()].sort(roomIdByAtoZ).map((catId) => { {isCategorized &&
const rms = []; [...categories.keys()].sort(roomIdByAtoZ).map((catId) => {
const dms = []; const rms = [];
categories.get(catId).forEach((id) => { const dms = [];
if (directs.has(id)) dms.push(id); categories.get(catId).forEach((id) => {
else rms.push(id); if (directs.has(id)) dms.push(id);
}); else rms.push(id);
rms.sort(roomIdByAtoZ); });
dms.sort(roomIdByActivity); rms.sort(roomIdByAtoZ);
return ( dms.sort(roomIdByActivity);
<RoomsCategory return (
key={catId} <RoomsCategory
spaceId={catId} key={catId}
name={mx.getRoom(catId).name} spaceId={catId}
roomIds={rms.concat(dms)} name={mx.getRoom(catId).name}
drawerPostie={drawerPostie} roomIds={rms.concat(dms)}
/> drawerPostie={drawerPostie}
); />
})} );
})}
</> </>
); );
} }

View file

@ -4,11 +4,11 @@ import './Navigation.scss';
import SideBar from './SideBar'; import SideBar from './SideBar';
import Drawer from './Drawer'; import Drawer from './Drawer';
function Navigation() { function Navigation({jitsiCallId}) {
return ( return (
<div className="navigation"> <div className="navigation">
<SideBar /> <SideBar />
<Drawer /> <Drawer jitsiCallId={jitsiCallId} />
</div> </div>
); );
} }

View file

@ -19,10 +19,11 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s
import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg'; import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
function RoomsCategory({ function RoomsCategory({
spaceId, name, hideHeader, roomIds, drawerPostie, spaceId, name, hideHeader, roomIds, drawerPostie, jitsiCallId
}) { }) {
const { spaces, directs } = initMatrix.roomList; const { spaces, directs } = initMatrix.roomList;
const [isOpen, setIsOpen] = useState(true); const [isOpen, setIsOpen] = useState(true);
const TOPIC_JITSI_CALL = 'd38dd491fefa1cfffc27f9c57f2bdb4a'
const openSpaceOptions = (e) => { const openSpaceOptions = (e) => {
e.preventDefault(); e.preventDefault();
@ -45,6 +46,7 @@ function RoomsCategory({
const renderSelector = (roomId) => { const renderSelector = (roomId) => {
const isSpace = spaces.has(roomId); const isSpace = spaces.has(roomId);
const isDM = directs.has(roomId); const isDM = directs.has(roomId);
const mx = initMatrix.matrixClient
return ( return (
<Selector <Selector
@ -52,7 +54,23 @@ function RoomsCategory({
roomId={roomId} roomId={roomId}
isDM={isDM} isDM={isDM}
drawerPostie={drawerPostie} drawerPostie={drawerPostie}
onClick={() => (isSpace ? selectSpace(roomId) : selectRoom(roomId))} onClick={() => {
if (isSpace) {
selectSpace(roomId);
return;
}
if (
mx.getRoom(roomId).currentState.getStateEvents('m.room.topic')[0]?.getContent()
.topic === TOPIC_JITSI_CALL
) {
if (jitsiCallId !== roomId && !confirm(`Do you want to join ${mx.getRoom(roomId).name}?`)) {
return;
}
}
selectRoom(roomId);
}}
/> />
); );
}; };
@ -87,6 +105,7 @@ RoomsCategory.propTypes = {
hideHeader: PropTypes.bool, hideHeader: PropTypes.bool,
roomIds: PropTypes.arrayOf(PropTypes.string).isRequired, roomIds: PropTypes.arrayOf(PropTypes.string).isRequired,
drawerPostie: PropTypes.shape({}).isRequired, drawerPostie: PropTypes.shape({}).isRequired,
jitsiCallId: PropTypes.string
}; };
export default RoomsCategory; export default RoomsCategory;

View file

@ -15,8 +15,7 @@ import { useSelectedSpace } from '../../hooks/useSelectedSpace';
const TOPIC_JITSI_CALL = 'd38dd491fefa1cfffc27f9c57f2bdb4a' const TOPIC_JITSI_CALL = 'd38dd491fefa1cfffc27f9c57f2bdb4a'
function JitsiRoom({ isJitsiRoom, setIsJitsiRoom }) { function JitsiRoom({ isJitsiRoom, setIsJitsiRoom, jitsiCallId, setJitsiCallId }) {
const [jitsiCallId, setJitsiCallId] = useState(null);
const [roomInfo, setRoomInfo] = useState({ const [roomInfo, setRoomInfo] = useState({
roomTimeline: null, roomTimeline: null,
eventId: null, eventId: null,
@ -37,21 +36,21 @@ function JitsiRoom({ isJitsiRoom, setIsJitsiRoom }) {
?.getContent().topic; ?.getContent().topic;
if (mx.getRoom(rId) && topic === TOPIC_JITSI_CALL && jitsiCallId !== rId) { if (mx.getRoom(rId) && topic === TOPIC_JITSI_CALL && jitsiCallId !== rId) {
if (confirm('Do you want to join this call?')) { setJitsiCallId(rId);
setJitsiCallId(rId); setRoomName(roomTimeline.roomName);
setRoomName(roomTimeline.roomName); setRoomInfo({
setRoomInfo({ roomTimeline,
roomTimeline, eventId: eId ?? null,
eventId: eId ?? null, });
}); setCounter(counter + 1);
setCounter(counter + 1);
} else if (!jitsiCallId) {
setRoomInfo({
roomTimeline: null,
eventId: null,
});
}
} }
else if (!jitsiCallId) {
setRoomInfo({
roomTimeline: null,
eventId: null,
});
}
setIsJitsiRoom(topic === TOPIC_JITSI_CALL); setIsJitsiRoom(topic === TOPIC_JITSI_CALL);
}; };

View file

@ -28,6 +28,7 @@ function Client() {
const [loadingMsg, setLoadingMsg] = useState('Heating up'); const [loadingMsg, setLoadingMsg] = useState('Heating up');
const [dragCounter, setDragCounter] = useState(0); const [dragCounter, setDragCounter] = useState(0);
const [isJitsiRoom, setIsJitsiRoom] = useState(false); const [isJitsiRoom, setIsJitsiRoom] = useState(false);
const [jitsiCallId, setJitsiCallId] = useState(null);
const classNameHidden = 'client__item-hidden'; const classNameHidden = 'client__item-hidden';
const navWrapperRef = useRef(null); const navWrapperRef = useRef(null);
@ -174,10 +175,15 @@ function Client() {
onDrop={handleDrop} onDrop={handleDrop}
> >
<div className="navigation__wrapper" ref={navWrapperRef}> <div className="navigation__wrapper" ref={navWrapperRef}>
<Navigation /> <Navigation jitsiCallId={jitsiCallId} />
</div> </div>
<div className={isJitsiRoom ? ROOM_CLASS : JITSI_ROOM_CLASS}> <div className={isJitsiRoom ? ROOM_CLASS : JITSI_ROOM_CLASS}>
<JitsiRoom isJitsiRoom={isJitsiRoom} setIsJitsiRoom={setIsJitsiRoom} /> <JitsiRoom
isJitsiRoom={isJitsiRoom}
setIsJitsiRoom={setIsJitsiRoom}
jitsiCallId={jitsiCallId}
setJitsiCallId={setJitsiCallId}
/>
</div> </div>
<div className={isJitsiRoom ? 'hidden' : ROOM_CLASS} ref={roomWrapperRef}> <div className={isJitsiRoom ? 'hidden' : ROOM_CLASS} ref={roomWrapperRef}>
<Room isJitsiRoom={isJitsiRoom} /> <Room isJitsiRoom={isJitsiRoom} />