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

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

View file

@ -14,7 +14,8 @@ const opcodes = {
22: { name: "EVENT_VOICE_ASSIGN_SERVER", data: "JSON" }, 22: { name: "EVENT_VOICE_ASSIGN_SERVER", data: "JSON" },
23: { name: "ACTION_VOICE_CONNECTION_REQUEST", data: "JSON" }, 23: { name: "ACTION_VOICE_CONNECTION_REQUEST", data: "JSON" },
24: { name: "EVENT_VOICE_CONNECTION_ANSWER", 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 = "@"; const opcodeSeparator = "@";
@ -98,7 +99,7 @@ GatewayConnection.prototype.connect = function(token) {
break; break;
} }
case "EVENT_VOICE_CONNECTION_ANSWER": { 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") { if (this.webrtcConnection.signalingState === "stable") {
logRtc("Server sent answer, but we were in stable state"); logRtc("Server sent answer, but we were in stable state");
return; return;
@ -113,7 +114,7 @@ GatewayConnection.prototype.connect = function(token) {
break; break;
} }
case "EVENT_RENEGOTIATE_REQUIRED": { 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"); logRtc("Server requested renegotiation");
@ -121,6 +122,12 @@ GatewayConnection.prototype.connect = function(token) {
break; 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: { default: {
logGateway("Got unknown packet", message.data); logGateway("Got unknown packet", message.data);
break; break;

View file

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

View file

@ -1,5 +1,6 @@
import defaultProfile from '../../Content/Images/defaultprofile_256px-256px.png' 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 }) { export default function ProfileLink({ object, size, type, offset=true, children=null }) {
let picture; 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 // Not actually implemented on the server and can be unsafe, this is just futureproofing
picture = <img className={ pictureClass } src={ object.picture } alt="Profile"></img> picture = <img className={ pictureClass } src={ object.picture } alt="Profile"></img>
} else { } 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 { } else {
picture = null; 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 title = type === 'channel' ? object.title : object.username;
const bottomInfo = offset ? children : null; const bottomInfo = offset ? children : null;

View file

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

View file

@ -28,3 +28,7 @@ body {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
* {
font-size: 18px !important;
}

View file

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

View file

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

View file

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

View file

@ -1,9 +1,32 @@
.profile-picture { .profile-picture {
border-radius: 50%; border-radius: 50%;
flex-shrink: 0;
margin: 5px; margin: 5px;
width: 32px; width: 32px;
height: 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 { &.profile-picture-8 {
width: 8px; width: 8px;
height: 8px; height: 8px;
@ -44,5 +67,21 @@
} }
.profile-username { .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;
} }

View file

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

View file

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