WIP call style
This commit is contained in:
parent
b76feea519
commit
7bf7f23a5e
5 changed files with 107 additions and 84 deletions
1
public/res/ic/filled/hangup_call.svg
Normal file
1
public/res/ic/filled/hangup_call.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M480 416q126 0 241 50.5T918 613q8 10 8.5 22t-8.5 21l-94 94q-8 8-23 9t-24-6l-114-85q-6-5-9-11t-3-13V505q-42-16-85.5-22.5T480 476q-42 0-85.5 6.5T309 505v139q0 7-3 13t-9 11l-114 85q-12 9-24.5 8T136 750l-94-94q-9-9-8.5-21t8.5-22q82-96 197-146.5T480 416Z"/></svg>
|
After Width: | Height: | Size: 353 B |
|
@ -1,6 +1,7 @@
|
||||||
import React, { useState, useEffect, useRef } from 'react';
|
import React, { useState, useEffect, useRef } from 'react';
|
||||||
import './Room.scss';
|
import './JitsiRoom.scss';
|
||||||
import { JitsiMeeting } from '@jitsi/react-sdk';
|
import { JitsiMeeting } from '@jitsi/react-sdk';
|
||||||
|
import SearchIC from '../../../../public/res/ic/filled/hangup_call.svg';
|
||||||
|
|
||||||
import initMatrix from '../../../client/initMatrix';
|
import initMatrix from '../../../client/initMatrix';
|
||||||
import cons from '../../../client/state/cons';
|
import cons from '../../../client/state/cons';
|
||||||
|
@ -69,19 +70,7 @@ function JitsiRoom({ setIsJitsiRoom }) {
|
||||||
<div className="call_header" id="header" ref={openerRef}>
|
<div className="call_header" id="header" ref={openerRef}>
|
||||||
{roomName}
|
{roomName}
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<div className="call_iframe">
|
||||||
onClick={() => {
|
|
||||||
setJitsiCallId(null);
|
|
||||||
setRoomName('');
|
|
||||||
setRoomInfo({
|
|
||||||
roomTimeline: null,
|
|
||||||
eventId: null,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
X
|
|
||||||
</Button>
|
|
||||||
<Button>Return</Button>
|
|
||||||
<JitsiMeeting
|
<JitsiMeeting
|
||||||
key={counter}
|
key={counter}
|
||||||
domain="meet.calyx.net"
|
domain="meet.calyx.net"
|
||||||
|
@ -134,8 +123,27 @@ function JitsiRoom({ setIsJitsiRoom }) {
|
||||||
// here you can attach custom event listeners to the Jitsi Meet External API
|
// here you can attach custom event listeners to the Jitsi Meet External API
|
||||||
// you can also store it locally to execute commands
|
// you can also store it locally to execute commands
|
||||||
}}
|
}}
|
||||||
|
getIFrameRef={(iframeRef) => {
|
||||||
|
iframeRef.style.height = '96%';
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="call_buttons">
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
setJitsiCallId(null);
|
||||||
|
setRoomName('');
|
||||||
|
setRoomInfo({
|
||||||
|
roomTimeline: null,
|
||||||
|
eventId: null,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
className="close_button"
|
||||||
|
>
|
||||||
|
<img src={SearchIC} alt="hangup" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
|
|
34
src/app/organisms/room/JitsiRoom.scss
Normal file
34
src/app/organisms/room/JitsiRoom.scss
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
@use '../../partials/flex';
|
||||||
|
@use '../../partials/screen';
|
||||||
|
|
||||||
|
.call_iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.call{
|
||||||
|
user-select: none;
|
||||||
|
border: 1px solid var(--bg-surface-border);
|
||||||
|
border-radius: var(--bo-radius);
|
||||||
|
color: var(--tc-surface-normal-low);
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.call_header{
|
||||||
|
z-index: 2001;
|
||||||
|
cursor: move;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.call_buttons {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.15rem;
|
||||||
|
right: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close_button {
|
||||||
|
filter: invert(26%) sepia(90%) saturate(1997%) hue-rotate(345deg) brightness(113%) contrast(91%);
|
||||||
|
height: 3rem;
|
||||||
|
}
|
|
@ -162,7 +162,7 @@ function Client() {
|
||||||
initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
|
initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
|
||||||
}
|
}
|
||||||
|
|
||||||
const JITSI_ROOM_CLASS = 'jitsi_room__wrapper'
|
const JITSI_ROOM_CLASS = 'jitsi_pip'
|
||||||
const ROOM_CLASS = `room__wrapper ${classNameHidden}`
|
const ROOM_CLASS = `room__wrapper ${classNameHidden}`
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
@extend .cp-fx__item-one;
|
@extend .cp-fx__item-one;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jitsi_room__wrapper {
|
.jitsi_pip {
|
||||||
display: grid;
|
display: grid;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20rem;
|
top: 20rem;
|
||||||
|
@ -29,32 +29,12 @@
|
||||||
width: 25rem;
|
width: 25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.call_header{
|
|
||||||
z-index: 2001;
|
|
||||||
cursor: move;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.call{
|
|
||||||
user-select: none;
|
|
||||||
border: 1px solid var(--bg-surface-border);
|
|
||||||
border-radius: var(--bo-radius);
|
|
||||||
color: var(--tc-surface-normal-low);
|
|
||||||
background-color: var(--bg-surface);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include screen.smallerThan(mobileBreakpoint) {
|
@include screen.smallerThan(mobileBreakpoint) {
|
||||||
.client__item-hidden {
|
.client__item-hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-display {
|
.loading-display {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
Loading…
Reference in a new issue