hippoz/brainlet-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

massive redesign and voice sort of works (this time the actual commit)

Browse source
This commit is contained in:
hippoz 2021-06-02 04:44:08 +03:00
parent bb1893a59f
commit fe219cd42b
Signed by: hippoz
GPG key ID: 7C52899193467641
11 changed files with 90 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
bfrontend/src/API/Gateway/GatewayConnection.js
View file

@ -14,7 +14,8 @@ const opcodes = {
22: { name: "EVENT_VOICE_ASSIGN_SERVER", data: "JSON" },
23: { name: "ACTION_VOICE_CONNECTION_REQUEST", data: "JSON" },
24: { name: "EVENT_VOICE_CONNECTION_ANSWER", data: "JSON" },
25: { name: "EVENT_RENEGOTIATE_REQUIRED", data: "JSON" }
25: { name: "EVENT_RENEGOTIATE_REQUIRED", data: "JSON" },
26: { name: "EVENT_TRACK_NOTIFICATION", data: "JSON" }
};
const opcodeSeparator = "@";
@ -98,7 +99,7 @@ GatewayConnection.prototype.connect = function(token) {
break;
}
case "EVENT_VOICE_CONNECTION_ANSWER": {
if (!this.webrtcConnection) throw new Error("rtc: got remote answer without local offer");
if (!this.webrtcConnection) throw new Error("rtc: got remote answer without local connection");
if (this.webrtcConnection.signalingState === "stable") {
logRtc("Server sent answer, but we were in stable state");
return;
@ -113,7 +114,7 @@ GatewayConnection.prototype.connect = function(token) {
break;
}
case "EVENT_RENEGOTIATE_REQUIRED": {
if (!this.webrtcConnection) throw new Error("rtc: got remote EVENT_RENEGOTIATE_REQUIRED without local offer");
if (!this.webrtcConnection) throw new Error("rtc: got remote EVENT_RENEGOTIATE_REQUIRED without local connection");
logRtc("Server requested renegotiation");
@ -121,6 +122,12 @@ GatewayConnection.prototype.connect = function(token) {
break;
}
case "EVENT_TRACK_NOTIFICATION": {
if (!this.webrtcConnection) throw new Error("rtc: got remote EVENT_TRACK_NOTIFICATION without local connection");
this.webrtcConnection.addTransceiver(packet.data.kind);
break;
}
default: {
logGateway("Got unknown packet", message.data);
break;

4
bfrontend/src/Components/Messages/Message.js
View file

@ -3,8 +3,8 @@ import UserProfileLink from '../Users/UserProfileLink';
export default function Message({ message }) {
return (
<div className="message">
<UserProfileLink size="0" user={ message.author }></UserProfileLink>
<span style={ {paddingLeft: "5px"} }>{ message.content }</span>
<UserProfileLink size="0" user={ message.author } />
<span className="message-content">{ message.content }</span>
</div>
);
}

8
bfrontend/src/Components/UI/ProfileLink.js
View file

@ -1,5 +1,6 @@
import defaultProfile from '../../Content/Images/defaultprofile_256px-256px.png'
// This is a mess pls fix later
export default function ProfileLink({ object, size, type, offset=true, children=null }) {
let picture;
@ -11,13 +12,16 @@ export default function ProfileLink({ object, size, type, offset=true, children=
// Not actually implemented on the server and can be unsafe, this is just futureproofing
picture = <img className={ pictureClass } src={ object.picture } alt="Profile"></img>
} else {
picture = <img className={ pictureClass } src={ defaultProfile } alt="Profile"></img>
picture = <div className={`profile-picture default-${type}`} alt="Profile">
<span className={`default-${type}-styled-text`}>{ (type === "user") ? "@" : "#" }</span>
</div>
}
} else {
picture = null;
}
const classes = offset ? 'profile-link profile-link-offset-text' : 'profile-link';
let classes = offset ? 'profile-link profile-link-offset-text' : 'profile-link';
if (type === "user") classes += " darker-text";
const title = type === 'channel' ? object.title : object.username;
const bottomInfo = offset ? children : null;

4
bfrontend/src/Components/UI/Sidebar.js
View file

@ -7,7 +7,9 @@ import { connect } from 'react-redux';
function Sidebar({ user }) {
return (
<div className="main-card sidebar">
<div className="bar-card">
<div className="bar-card" style={{
color: "var(--darker-text-color)"
}}>
{ user && <UserProfileLink user={ user } /> }
{ !user && <ProfileLinkLoader /> }
</div>

4
bfrontend/src/Styles/App.scss
View file

@ -27,4 +27,8 @@ body {
max-height: 100vh;
margin: 0px;
padding: 0px;
}
* {
font-size: 18px !important;
}

5
bfrontend/src/Styles/Components/Card.scss
View file

@ -16,12 +16,9 @@
@include card;
background-color: var(--channel-top-bar-color);
// box-shadow: 0 8px 6px -6px black;
box-shadow: var(--card-box-shadow-color);
height: 32px;
padding: 8px;
border-radius: var(--bar-cards-border-radius);
border-bottom: var(--bar-card-border-bottom);
display: flex;
align-items: center;
justify-content: left;

1
bfrontend/src/Styles/Components/Containers.scss
View file

@ -17,6 +17,7 @@
flex-direction: column;
overflow: auto;
overflow-x: hidden;
min-width: 230px;
}
.channel-list {

7
bfrontend/src/Styles/Components/Message.scss
View file

@ -6,7 +6,7 @@
display: flex;
flex-direction: row;
margin: 3px;
margin-left: 10px;
margin-left: 15px;
padding: 1px;
border-radius: var(--channel-message-border-radius);
background-color: var(--channel-message-color);
@ -20,4 +20,9 @@
.unread-indicator {
float: right;
}
.message-content {
padding-left: 6px;
text-rendering: "optimizeLegibility";
}

41
bfrontend/src/Styles/Components/ProfileLink.scss
View file

@ -1,9 +1,32 @@
.profile-picture {
border-radius: 50%;
flex-shrink: 0;
margin: 5px;
width: 32px;
height: 32px;
&.default-channel {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(
hsl(225, 80%, 50%),
hsl(299, 80%, 50%)
);
color: var(--default-text-color);
}
&.default-user {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(
hsl(9, 100%, 62%),
hsl(327, 100%, 62%)
);
color: var(--default-text-color);
}
&.profile-picture-8 {
width: 8px;
height: 8px;
@ -44,5 +67,21 @@
}
.profile-username {
font-weight: 550;
font-weight: 500;
font-size: 1rem;
line-height: 1.256rem;
}
.darker-text {
color: var(--darker-text-color);
}
.default-channel-styled-text {
font-size: 24px !important;
user-select: none;
}
.default-user-styled-text {
font-size: 24px !important;
user-select: none;
}

3
bfrontend/src/Styles/Components/Textbox.scss
View file

@ -11,5 +11,8 @@
border-radius: var(--message-box-border-radius);
background-color: var(--message-box-color);
height: 32px;
padding: 6px;
padding-left: 16px;
font-size: 16px !important;
}
}

26
bfrontend/src/Styles/root.scss
View file

@ -1,19 +1,21 @@
:root {
--background-color: #{$dark1};
--background-color: #030303;
--default-main-card-color: var(--background-color);
--card-box-shadow-color: 0 1px 0 #1d1a1abe;
--default-text-color: #{$light3};
--darker-text-color: #{$light1};
--default-text-color: #cacaca;
--darker-text-color: #808080;
--accent-color-dark: #{$dark2};
--accent-color-light: #{$dark3};
--accent-color-very-light: #{$dark4};
--card-accent-color: #212121;
--focus-accent-color: hsl(246, 57%, 38%);
--focus-accent-color-deep: hsl(255, 70%, 30%);
--channel-top-bar-color-accent: var(--accent-color-light);
--channel-top-bar-color-accent: var(--background-color);
--channel-top-bar-color: var(--background-color);
--message-box-color: var(--accent-color-light);
--bar-card-border-bottom: solid 1px #1d1d1d;
--message-box-color: var(--card-accent-color);
--message-box-shadow: #22222273 6px 8px 12px;
--channel-top-bar-border-color: var(--accent-color-dark);
--channel-list-background-color: var(--background-color);
@ -22,8 +24,8 @@
--channel-view-container-color: var(--accent-color-dark);
--button-color: var(--background-color);
--button-hover-color: var(--accent-color-dark);
--button-selected-color: var(--accent-color-light);
--button-hover-color: var(--focus-accent-color-deep);
--button-selected-color: var(--focus-accent-color);
--default-transition-duration: 50ms;
@ -31,6 +33,6 @@
--default-button-border-radius: 0px;
--channel-message-border-radius: 0px;
--bar-cards-border-radius: 0px;
--channel-button-border-radius: 4px;
--message-box-border-radius: 4px;
--channel-button-border-radius: 10px;
--message-box-border-radius: 10px;
}