resizeable sidebar and meeting names on startpage
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
eedc21fb8e
commit
f3e6699ca5
|
@ -20,6 +20,7 @@ function App() {
|
|||
conferenceData={conferenceData}
|
||||
setConferenceData={setConferenceData}
|
||||
userInfo={userInfo}
|
||||
usersData={roomData}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
|
4
frontend/src/components/meeting/Meeting.css
Normal file
4
frontend/src/components/meeting/Meeting.css
Normal file
|
@ -0,0 +1,4 @@
|
|||
.meeting-quickjoin {
|
||||
text-align: center
|
||||
|
||||
}
|
|
@ -1,19 +1,26 @@
|
|||
import { ConferenceData } from '../../background/jitsi/eventListeners'
|
||||
import { UsersData } from '../../background/types/roomData'
|
||||
import useMeetingStarted from '../../hooks/useMeetingStarted'
|
||||
import { useRoomName } from '../../hooks/useRoomName'
|
||||
import JitsiEntrypoint from '../jitsi/JitsiEntrypoint'
|
||||
import { UserInfo } from '../jitsi/types'
|
||||
import MeetingNameInput from './MeetingNameInput'
|
||||
import './Meeting.css'
|
||||
|
||||
interface Props {
|
||||
conferenceData: ConferenceData | undefined
|
||||
setConferenceData: (newData: ConferenceData) => void
|
||||
userInfo: UserInfo
|
||||
usersData: UsersData
|
||||
}
|
||||
|
||||
function Meeting({ conferenceData, setConferenceData, userInfo }: Props) {
|
||||
function Meeting(props: Props) {
|
||||
const { conferenceData, setConferenceData, userInfo, usersData } = props
|
||||
console.log("[Rooms] meeting usersData", props)
|
||||
const [meetingStarted] = useMeetingStarted()
|
||||
const { roomName } = useRoomName()
|
||||
const [_, setMeetingStarted] = useMeetingStarted()
|
||||
const { updateAndSubmitRoomName: updateAndSubmitRoomName } = useRoomName()
|
||||
|
||||
if (meetingStarted) {
|
||||
return (
|
||||
|
@ -26,7 +33,32 @@ function Meeting({ conferenceData, setConferenceData, userInfo }: Props) {
|
|||
)
|
||||
}
|
||||
|
||||
return <MeetingNameInput roomName={roomName} currentUser={userInfo.displayName} />
|
||||
return (
|
||||
<div>
|
||||
<MeetingNameInput roomName={roomName} currentUser={userInfo.displayName} />
|
||||
<div className="meeting-quickjoin">
|
||||
{usersData?.roomsData.map((roomData) => {
|
||||
return (
|
||||
<>
|
||||
<h3>
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
updateAndSubmitRoomName(roomData.roomName)
|
||||
setMeetingStarted(true)
|
||||
}}
|
||||
>
|
||||
{roomData.roomName}
|
||||
</a>
|
||||
</h3>
|
||||
{roomData.participants.map((participant) => (
|
||||
<div key={participant.jid}> {participant.displayName} </div>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default Meeting
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
.sidebar {
|
||||
resize: horizontal;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
white-space: nowrap;
|
||||
|
|
Loading…
Reference in a new issue