Skip to content
Snippets Groups Projects
Commit 3494e067 authored by Giovanni Caruso's avatar Giovanni Caruso
Browse files

Add avatar to user id

parent f9653802
No related branches found
No related tags found
1 merge request!55Avatar
Pipeline #104160 passed
......@@ -523,3 +523,10 @@ button.selected {
url("./assets/fonts/martel-v4-latin/martel-v4-latin-regular.svg#Martel")
format("svg");
}
.avatar {
width: 100px;
height: 100px;
margin-right: 5px;
border-radius: 100px;
}
......@@ -48,7 +48,7 @@ const onRoomConnect = (room_) => {
const medium = "/quality-medium.svg"
const low = "/quality-low.svg"
const peer = getOrInsertPeerById(humanhash.humanize(id, 2)).children[0]
const peer = getOrInsertPeerById(humanhash.humanize(id, 2)).children[2]
if (quality < 0.33) {
if (!peer.src.includes(high)) {
peer.src = high
......@@ -65,19 +65,19 @@ const onRoomConnect = (room_) => {
})
room.addEventListener("weSyncedWithPeer", ({ detail: id }) => {
getOrInsertPeerById(humanhash.humanize(id, 2)).children[1].className =
getOrInsertPeerById(humanhash.humanize(id, 2)).children[3].className =
"peer-status upload synced"
updateOverallStatusIcon()
})
room.addEventListener("waitingForSyncStep", ({ detail: id }) => {
getOrInsertPeerById(humanhash.humanize(id, 2)).children[2].className =
getOrInsertPeerById(humanhash.humanize(id, 2)).children[4].className =
"peer-status download negotiating"
updateOverallStatusIcon()
})
room.addEventListener("peerSyncedWithUs", ({ detail: id }) => {
getOrInsertPeerById(humanhash.humanize(id, 2)).children[2].className =
getOrInsertPeerById(humanhash.humanize(id, 2)).children[4].className =
"peer-status download synced"
updateOverallStatusIcon()
})
......@@ -227,13 +227,19 @@ HTML.roomIDElem.addEventListener("keydown", (event) => {
const getOrInsertPeerById = (id) => {
for (const peerElem of HTML.connectedPeers.children) {
const peerId = peerElem.children[3].innerHTML
const peerId = peerElem.children[1].innerHTML
if (peerId == id) {
return peerElem
}
}
const peerElem = document.createElement("li")
const avatarImage = document.createElement("img")
avatarImage.src = "https://robohash.org/" + id + ".png" + "?bgset=bg1"
avatarImage.alt = id
avatarImage.className = "avatar"
const quality = document.createElement("img")
quality.src = "/quality-low.svg"
quality.alt = "Peer quality icon"
......@@ -250,10 +256,11 @@ const getOrInsertPeerById = (id) => {
peerId.innerHTML = id
peerElem.appendChild(avatarImage)
peerElem.appendChild(peerId)
peerElem.appendChild(quality)
peerElem.appendChild(ourStatus)
peerElem.appendChild(theirStatus)
peerElem.appendChild(peerId)
HTML.connectedPeers.appendChild(peerElem)
......@@ -263,8 +270,8 @@ const getOrInsertPeerById = (id) => {
const updateOverallStatusIcon = () => {
for (const peerElem of HTML.connectedPeers.children) {
if (
!peerElem.children[1].classList.contains("synced") ||
!peerElem.children[2].classList.contains("synced")
!peerElem.children[3].classList.contains("synced") ||
!peerElem.children[4].classList.contains("synced")
) {
HTML.overallStatusIcon.className = "synchronising"
HTML.overallStatusIconImage.src = "synchronising.svg"
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment