Skip to content

Commit

Permalink
Move chat into lobby space
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulgoetze
paulgoetze committed Dec 12, 2021
1 parent ad61d7d commit e2ab06f
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 101 deletions.
95 changes: 53 additions & 42 deletions src/components/Chat.vue
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,44 @@
<template>
<li class="peer chat-peer">
<div class="chat">
<div class="messages-area">
<div class="message-and-avatar" v-if="peerCount == 1">
<span class="message message-error" v-html="$t('chat.error')">
</span>
</div>
<div class="message-and-avatar"
v-for="chatMessage in chatMessages" :key="chatMessage.time"
:class="{'message-and-avatar--right': chatMessage.from !== localPeerId}">
<PeerAvatar :peerId="chatMessage.from" />
<span class="message"
:title="displayTime(chatMessage.time)"
v-html="escapeHTML(chatMessage.msg)">
</span>
</div>
</div>
<form class="send-area">
<input type="textarea"
ref="messageInput"
v-model="newChatMessage"
:aria-label="$t('chat.messagePlaceholder')"
:placeholder="$t('chat.messagePlaceholder')" />
<button type="submit" :title="$t('chat.sendAlt')" @click.prevent="sendChatMessage()">
<inline-svg
:alt="$t('chat.sendAlt')"
:aria-label="$t('chat.sendAlt')"
:src="require('../assets/send.svg')"
/>
</button>
</form>
<aside class="chat-panel" tabindex="0" @keydown.esc="$emit('close')">
<button class="close" @click="$emit('close')">
<inline-svg
:aria-label="$t('closeAlt')"
:src="require('../assets/icons/cross.svg')"
/>
</button>

<div class="messages-area">
<div class="message-and-avatar" v-if="peerCount == 1">
<span class="message message-error" v-html="$t('chat.error')">
</span>
</div>
</li>

<div class="message-and-avatar"
v-for="chatMessage in chatMessages" :key="chatMessage.time"
:class="{'message-and-avatar--right': chatMessage.from !== localPeerId}">
<PeerAvatar :peerId="chatMessage.from" />
<span class="message"
:title="displayTime(chatMessage.time)"
v-html="escapeHTML(chatMessage.msg)">
</span>
</div>
</div>

<form class="send-area">
<input type="textarea"
ref="messageInput"
v-model="newChatMessage"
:aria-label="$t('chat.messagePlaceholder')"
:placeholder="$t('chat.messagePlaceholder')" />
<button type="submit" :title="$t('chat.sendAlt')" @click.prevent="sendChatMessage()">
<inline-svg
:alt="$t('chat.sendAlt')"
:aria-label="$t('chat.sendAlt')"
:src="require('../assets/send.svg')"
/>
</button>
</form>
</aside>
</template>

<script>
Expand Down Expand Up @@ -96,18 +103,23 @@ export default {
<style lang="scss">
@import '@/css/styles.scss';
.chat-peer {
height: 100%;
width: 100%;
}
.chat {
.chat-panel {
background: $chat-background;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
@include defaultFont()
height: 100%;
width: 100%;
padding-top: 54px;
@include defaultFont();
@include defaultShadow();
outline: none;
overflow: auto;
.close {
@include inlineButton();
@include closeButton(36px);
}
}
.messages-area {
Expand Down Expand Up @@ -184,7 +196,6 @@ export default {
button[type=submit] {
appearance: none;
margin-right: -1px;
cursor: pointer;
flex-shrink: 0;
background: $white;
Expand Down
125 changes: 68 additions & 57 deletions src/components/Party.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@

<transition name="fade-control">
<button
:title="$t('party.openTextChatTitle')"
:title="chatIsVisible ? $t('party.hideTextChatTitle') : $t('party.openTextChatTitle')"
class="control control--text-chat"
:class="{'control--alert': this.chatNewMessages}"
@click="toggleChat(); $refs.chat.blur()"
Expand Down Expand Up @@ -154,22 +154,14 @@
<transition-group name="fade-control" tag="ul"
:class="{
'spotlight': true,
'spotlight--empty': stagePeers.length + (chatOpen ? 1 : 0) === 0,
'spotlight--one': stagePeers.length + (chatOpen ? 1 : 0) === 1,
'spotlight--two': stagePeers.length + (chatOpen ? 1 : 0) === 2,
'spotlight--three': stagePeers.length + (chatOpen ? 1 : 0) === 3,
'spotlight--four': stagePeers.length + (chatOpen ? 1 : 0) === 4,
'spotlight--five': stagePeers.length + (chatOpen ? 1 : 0) === 5,
'spotlight--six': stagePeers.length + (chatOpen ? 1 : 0) === 6,
'spotlight--empty': stagePeers.length === 0,
'spotlight--one': stagePeers.length === 1,
'spotlight--two': stagePeers.length === 2,
'spotlight--three': stagePeers.length === 3,
'spotlight--four': stagePeers.length === 4,
'spotlight--five': stagePeers.length === 5,
'spotlight--six': stagePeers.length === 6,
}">
<Chat
:key="'chat'"
v-if="chatOpen"
:chatMessages="chatMessages"
:localPeerId="localPeer.id"
:peerCount="peers.length"
@send-chat-message="(message) => $emit('send-chat-message', message)"
/>
<Peer v-for="peer in stagePeers"
:key="peer.id"
type="stage"
Expand All @@ -183,7 +175,7 @@
</div>

<transition name="fade-control" @after-leave="onResize">
<div class="lobby" v-if="lobbyPeers.length > 0">
<div class="lobby" v-if="lobbyIsVisible">
<transition-group name="fade-control" tag="ul" class="couch">
<Peer v-for="peer in lobbyPeers"
:key="peer.id"
Expand All @@ -197,6 +189,24 @@
</transition-group>
</div>
</transition>

<transition name="fade-control">
<div
v-if="chatIsVisible"
:class="{
'chat': true,
'chat--overlay': lobbyIsVisible || mobile()
}">
<Chat
:key="'chat'"
:chatMessages="chatMessages"
:localPeerId="localPeer.id"
:peerCount="peers.length"
@send-chat-message="(message) => $emit('send-chat-message', message)"
@close="toggleChat"
/>
</div>
</transition>
</main>
</template>

Expand All @@ -214,7 +224,7 @@ export default {
controlsActive: true,
cameraOff: false,
microphoneMuted: false,
chatOpen: false,
chatIsVisible: false,
chatNewMessages: false,
presenter: null,
lastPresenter: null,
Expand All @@ -241,18 +251,10 @@ export default {
this.autoAdjustPeers(newPeers)
},
chatMessages() {
if (!this.chatOpen) this.chatNewMessages = true;
if (!this.chatIsVisible) this.chatNewMessages = true
},
presenter(newPresenter, oldPresenter) {
if (newPresenter) {
// chat special case
if (this.oldPresenter === "chat") {
// keep chat as presenter but remember new presenter as last presenter
this.presenter = "chat"
this.lastPresenter = newPresenter
return
}
// enter presenter mode (or switch to new presenter)
this.lastPresenter = oldPresenter
this.stagePeers.forEach((peer) => {
Expand Down Expand Up @@ -290,6 +292,9 @@ export default {
canShare() {
return !!(navigator.share || (navigator.clipboard && navigator.clipboard.writeText))
},
lobbyIsVisible() {
return this.lobbyPeers.length > 0
}
},
methods: {
togglePeer(peer) {
Expand All @@ -314,10 +319,10 @@ export default {
},
autoAdjustPeers(peers) {
const remotePeers = peers.filter((peer) => !peer.isLocal())
if (remotePeers.length === 0 && this.presenter !== "chat") {
if (remotePeers.length === 0) {
this.sendPeerToStage(this.localPeer)
}
if (remotePeers.length === 1 && this.presenter !== "chat") {
if (remotePeers.length === 1) {
this.sendPeerToLobby(this.localPeer)
this.sendPeerToStage(remotePeers[0])
}
Expand All @@ -339,28 +344,8 @@ export default {
return (window.innerWidth < 576 || window.innerHeight < 500)
},
toggleChat() {
if (this.chatOpen) {
// closing chat...
if (this.presenter === "chat") {
// ... and the chat was the presenter, so we return to last presenter (if any)
this.presenter = null
} else if (this.lobbyPeers.length > 0 && this.stagePeers.length !== 1) {
// ... and lobby is not empty, so that we can fill the void that the chat left
this.togglePeer(this.lobbyPeers[0])
}
} else {
// opening chat...
this.chatNewMessages = false;
if (this.mobile()) {
// .. and this is mobile, so we make the chat the presenter
this.presenter = "chat"
} else if (this.lobbyPeers.length > 5) {
// ...and the stage is full, so we need to move somebody to the lobby
this.togglePeer(this.stagePeers[5])
}
}
this.autoAdjustPeers(this.peers)
this.chatOpen = !this.chatOpen
this.chatIsVisible = !this.chatIsVisible
this.chatNewMessages = false
},
switchLanguage() {
this.$root.$i18n.locale = this.$root.$i18n.locale === 'de' ? 'en' : 'de'
Expand Down Expand Up @@ -520,25 +505,27 @@ export default {
&--landscape {
flex-direction: row;
.lobby {
height: 100%;
}
.lobby .peer {
width: $lobby-width-mobile;
@media (min-width: $mobile-plus) { width: $lobby-width-mobile-plus; }
@media (min-width: $desktop) { width: $lobby-width-desktop; }
@media (min-width: $desktop-plus) { width: $lobby-width-desktop-plus; }
@media (min-width: $desktop-large){ width: $lobby-width-desktop-large; }
@media (min-width: $desktop-huge) { width: $lobby-width-desktop-huge; }
}
.chat {
height: 100%;
width: $lobby-width-desktop-huge;
}
}
&--portrait {
flex-direction: column;
.lobby {
width: 100%;
}
.lobby .peer {
height: $lobby-height-mobile;
@media (min-height: $mobile-plus-height) { height: $lobby-height-mobile-plus; }
@media (min-height: $desktop-height) { height: $lobby-height-desktop; }
Expand All @@ -564,13 +551,37 @@ export default {
overflow: hidden;
}
}
chat
.lobby {
overflow: hidden;
background: #222;
opacity: 1;
}
.chat {
display: flex;
z-index: 1000;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 1;
@media (min-width: $mobile-plus) {
& {
top: 0;
left: auto;
opacity: 0.92;
height: 100%;
width: 100%;
}
}
&--overlay {
position: fixed;
}
}
.couch {
height: 100%;
width: 100%;
Expand Down
4 changes: 2 additions & 2 deletions src/i18nStrings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -268,8 +268,8 @@ export default {
microphoneAlt: "Mikrofon",
screenShareTitle: "Bildschirm teilen",
screenShareAlt: "Desktop-Computer",
openTextChatTitle: "Text-chat zeigen",
hideTextChatTitle: "Text-chat verbergen",
openTextChatTitle: "Text-Chat zeigen",
hideTextChatTitle: "Text-Chat verbergen",
textChatAlt: "Sprechblasen",
hangUpTitle: "Auflegen",
hangUpAlt: "Telefonhörer nach unten zeigend",
Expand Down

0 comments on commit e2ab06f

Please sign in to comment.