diff options
| -rw-r--r-- | client-web/public/assets/style/master.css | 128 | ||||
| -rw-r--r-- | client-web/source/user/remote.ts | 14 |
2 files changed, 70 insertions, 72 deletions
diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css index 8a22d1b..a8e8ce9 100644 --- a/client-web/public/assets/style/master.css +++ b/client-web/public/assets/style/master.css @@ -2,114 +2,112 @@ @import url("./logger.css"); * { - font-family: "Ubuntu", sans-serif; - font-weight: 300; - color: white; - margin: 0px; - padding: 0px; + font-family: "Ubuntu", sans-serif; + font-weight: 300; + color: white; + margin: 0px; + padding: 0px; } :root { - --bg: #212121; - --bg-dark: #070707; - --bg-light: #354b58; - --bg-lighter: #4f5b62; - --bg-disabled: #720000; - --bg-enabled: #097200; - --ac: #4a148c; - --ac-light: #7c43bd; - --ac-dark: #12005e; + --bg: #151515; + --bg-dark: #070707; + --bg-light: #494949; + --bg-lighter: #949494; + --bg-disabled: #720000; + --bg-enabled: #097200; + --ac: #5e3f84; + --ac-light: #7c43bd; + --ac-dark: #12005e; } body { - background-color: var(--bg-dark); + background-color: var(--bg-dark); } h2 { - font-weight: 700; - margin: 1em; + font-weight: 700; + margin: 1em; } input[type="button"], button { - padding: 0.5em; - margin: 0.25em; - background-color: var(--bg-light); - border: 0px solid transparent; - border-radius: 3px; + padding: 0.5em; + margin: 0.25em; + background-color: var(--ac); + border: 0px solid transparent; + border-radius: 3px; } input[type="button"]:hover, button:hover { - background-color: var(--bg-lighter); -} -input[type="button"].enabled, -button.enabled { - background-color: var(--bg-enabled); + filter: brightness(130%); } input[type="text"] { - background-color: var(--bg-dark); - border: 1px solid var(--ac-light); + background-color: var(--bg-dark); + border: 1px solid var(--ac-light); } .local-controls { - background-color: var(--bg); - padding: 0.5em; - position: absolute; - bottom: 0.5em; - border: 0px solid transparent; - border-radius: 5px; - left: 50%; - transform: translateX(-50%); - z-index: 100; + background-color: var(--bg); + padding: 0.5em; + position: absolute; + bottom: 0.5em; + border: 0px solid transparent; + border-radius: 5px; + left: 50%; + transform: translateX(-50%); + z-index: 100; } .room { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .user { - background-color: var(--bg); - border: 0px soly transparent; - border-radius: 5px; - padding: 1em; - vertical-align: baseline; - min-width: 10em; - margin: 0.5em; + background-color: var(--bg); + border: 0px soly transparent; + border-radius: 5px; + padding: 1em; + vertical-align: baseline; + min-width: 10em; + margin: 0.5em; } .user .info .name { - font-weight: 400; + font-weight: 400; } .user.local .info .name { - text-decoration: underline; + text-decoration: underline; +} +.user .info { + margin-bottom: 1em; } .media { - max-height: 30vh; - border: 0px solid transparent; - border-radius: 5px; + max-height: 30vh; + border: 0px solid transparent; + border-radius: 5px; } .start-box { - position: absolute; - top: 50vh; - left: 50vw; - transform: translate(-50%, -50%); + position: absolute; + top: 50vh; + left: 50vw; + transform: translate(-50%, -50%); } .start-box p { - margin-bottom: 0.5em; + margin-bottom: 0.5em; } .start-box input[type="text"] { - margin: 0.5em; - font-size: 32px; + margin: 0.5em; + font-size: 32px; } .menu-overlay { - position: absolute; - bottom: 0px; - right: 0px; - display: block; - text-align: right; + position: absolute; + bottom: 0px; + right: 0px; + display: block; + text-align: right; } - diff --git a/client-web/source/user/remote.ts b/client-web/source/user/remote.ts index 7ded214..eadb11f 100644 --- a/client-web/source/user/remote.ts +++ b/client-web/source/user/remote.ts @@ -20,11 +20,11 @@ export class RemoteUser extends User { } this.peer.ontrack = ev => { const t = ev.track - log("media", `remote track: ${this.name}`, t) + log("media", `remote track: ${this.display_name}`, t) this.add_track(new TrackHandle(t)) } this.peer.onnegotiationneeded = async () => { - log("webrtc", `negotiation needed: ${this.name}`) + log("webrtc", `negotiation needed: ${this.display_name}`) while (this.negotiation_busy) { await new Promise<void>(r => setTimeout(() => r(), 100)) } @@ -37,12 +37,12 @@ export class RemoteUser extends User { const offer_description = await this.peer.createOffer() await this.peer.setLocalDescription(offer_description) const offer = { type: offer_description.type, sdp: offer_description.sdp } - log("webrtc", `sent offer: ${this.name}`, { a: offer }) + log("webrtc", `sent offer: ${this.display_name}`, { offer }) this.room.signaling.send_relay({ offer }, this.id) } async on_offer(offer: RTCSessionDescriptionInit) { this.negotiation_busy = true - log("webrtc", `got offer: ${this.name}`, { a: offer }) + log("webrtc", `got offer: ${this.display_name}`, { offer }) const offer_description = new RTCSessionDescription(offer) await this.peer.setRemoteDescription(offer_description) this.answer() @@ -51,12 +51,12 @@ export class RemoteUser extends User { const answer_description = await this.peer.createAnswer() await this.peer.setLocalDescription(answer_description) const answer = { type: answer_description.type, sdp: answer_description.sdp } - log("webrtc", `sent answer: ${this.name}`, { a: answer }) + log("webrtc", `sent answer: ${this.display_name}`, { answer }) this.room.signaling.send_relay({ answer }, this.id) this.negotiation_busy = false } async on_answer(answer: RTCSessionDescriptionInit) { - log("webrtc", `got answer: ${this.name}`, { a: answer }) + log("webrtc", `got answer: ${this.display_name}`, { answer }) const answer_description = new RTCSessionDescription(answer) await this.peer.setRemoteDescription(answer_description) this.negotiation_busy = false @@ -67,7 +67,7 @@ export class RemoteUser extends User { } leave() { - log("usermodel", `remove remote user: ${this.name}`) + log("usermodel", `remove remote user: ${this.display_name}`) this.peer.close() this.room.el.removeChild(this.el) } |