diff --git a/src/js/account.js b/src/js/account.js index f2979c288..0a5d081f3 100644 --- a/src/js/account.js +++ b/src/js/account.js @@ -217,7 +217,7 @@ firebase.auth().onAuthStateChanged(function (user) { $("#menu .icon-button.account .text").text(displayName); try { - MP.name = displayName; + mp_setName(displayName); } catch {} showFavouriteThemesAtTheTop(); diff --git a/src/js/tribe.js b/src/js/tribe.js index 15b3c0eec..7f3d3a549 100644 --- a/src/js/tribe.js +++ b/src/js/tribe.js @@ -18,6 +18,8 @@ let MP = { expectedVersion: "0.8", }; +let scrollChat = true; + let tribeSounds = { join: new Audio("../sound/tribe_ui/join.wav"), leave: new Audio("../sound/tribe_ui/leave.wav"), @@ -629,29 +631,13 @@ function updateResultCountdown(text) { } function mp_scrollChat() { - let chatEl = $(".pageTribe .lobby .chat .messages"); - chatEl.animate( - { - scrollTop: - $($(".pageTribe .lobby .chat .messages div")[0]).outerHeight() * - 2 * - $(".pageTribe .lobby .chat .messages div").length, - }, - 0 - ); + let chatEl = $(".pageTribe .lobby .chat .messages")[0]; + let chatEl2 = $(".pageTest #result .tribeResultChat .chat .messages")[0]; - let chatEl2 = $(".pageTest #result .tribeResultChat .chat .messages"); - chatEl2.animate( - { - scrollTop: - $( - $(".pageTest #result .tribeResultChat .chat .messages div")[0] - ).outerHeight() * - 2 * - $(".pageTest #result .tribeResultChat .chat .messages div").length, - }, - 0 - ); + if (scrollChat) { + chatEl.scrollTop = chatEl.scrollHeight; + chatEl2.scrollTop = chatEl2.scrollHeight; + } } function updateAllGraphs(graphs, max) { @@ -810,6 +796,51 @@ function updateTribeUserSettingsPopup(sid) { ); } +function mp_setName(name) { + MP.name = name; + MP.socket.emit("mp_system_name_set", { name: name }); +} + +function mp_sendIsTypingUpdate(truefalse) { + MP.socket.emit("mp_room_user_istypingupdate", { + sid: MP.socket.id, + typing: truefalse, + name: MP.name, + }); +} + +function mp_updateWhoIsTyping() { + let string = ""; + + let names = []; + Object.keys(MP.room.whoIsTyping).forEach((sid) => { + if (MP.room.whoIsTyping[sid].truefalse) { + names.push(MP.room.whoIsTyping[sid].name); + } + }); + if (names.length > 0) { + for (let i = 0; i < names.length; i++) { + if (i === 0) { + string += `${names[i]}`; + } else if (i === names.length - 1) { + string += ` and ${names[i]}`; + } else { + string += `, ${names[i]}`; + } + } + if (names.length == 1) { + string += " is typing..."; + } else { + string += " are typing..."; + } + } else { + string = " "; + } + + $(".pageTribe .lobby .chat .whoIsTyping").html(string); + $(".pageTest #result .tribeResultChat .chat .whoIsTyping").html(string); +} + MP.socket.on("connect", (f) => { setTimerStyle("mini", true); MP.state = 1; @@ -820,8 +851,7 @@ MP.socket.on("connect", (f) => { name = firebase.auth().currentUser.displayName; } MP.id = MP.socket.id; - MP.name = name; - MP.socket.emit("mp_system_name_set", { name: name }); + mp_setName(name); mp_changeActiveSubpage("prelobby"); setTimeout(() => { if (MP.autoJoin) { @@ -834,6 +864,11 @@ MP.socket.on("connect", (f) => { }, 500); }); +MP.socket.on("mp_room_name_update", (data) => { + MP.room.users[data.sid].name = data.name; + mp_refreshUserList(); +}); + MP.socket.on("mp_update_online_stats", (data) => { $(".pageTribe .prelobby .welcome .stats").empty(); $(".pageTribe .prelobby .welcome .stats").append( @@ -1044,6 +1079,13 @@ MP.socket.on("mp_chat_message", (data) => { mp_scrollChat(); }); +MP.socket.on("mp_room_user_istypingupdate", (data) => { + if (MP.room.whoIsTyping === undefined) { + MP.room.whoIsTyping = {}; + } + MP.room.whoIsTyping[data.sid] = { name: data.name, truefalse: data.typing }; + mp_updateWhoIsTyping(); +}); $(".pageTest #result .tribeResultChat .chat .input input").keypress(() => { setTimeout(() => { $(".pageTribe .lobby .chat .input input").val( @@ -1482,6 +1524,7 @@ $(".pageTribe .lobby .chat .input input").keyup((e) => { Notifications.add("Message cannot be longer than 512 characters.", 0); return; } + mp_sendIsTypingUpdate(false); MP.socket.emit("mp_chat_message", { isSystem: false, isLeader: MP.room.isLeader, @@ -1496,6 +1539,25 @@ $(".pageTribe .lobby .chat .input input").keyup((e) => { } }); +$( + ".pageTribe .lobby .chat .input input, .pageTest #result .tribeResultChat .chat .input input" +).on("input", (e) => { + if (e.currentTarget.value.length === 1) { + //typing update + mp_sendIsTypingUpdate(true); + } else if (e.currentTarget.value == "") { + //not typing update + mp_sendIsTypingUpdate(false); + } +}); + +$( + ".pageTribe .lobby .chat .messages, .pageTest #result .tribeResultChat .chat .messages" +).on("scroll", (e) => { + let chatEl = $(".pageTribe .lobby .chat .messages")[0]; + scrollChat = chatEl.scrollHeight - chatEl.scrollTop === chatEl.clientHeight; +}); + $( ".pageTribe .lobby .inviteLink .text, .pageTest .tribeResultChat .inviteLink .code .text" ).click(async (e) => { diff --git a/src/sass/style.scss b/src/sass/style.scss index fce6966f4..e13b6242b 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -3040,6 +3040,15 @@ key { .input input { width: 100%; } + .whoIsTyping { + .who { + font-weight: 900; + } + height: 0.75rem; + font-size: 0.75rem; + padding: 0.25rem; + color: var(--sub-color); + } } .userlist { grid-area: userlist; diff --git a/static/index.html b/static/index.html index 27e633c53..159d7c0e0 100644 --- a/static/index.html +++ b/static/index.html @@ -1501,6 +1501,7 @@
+
users
@@ -3781,6 +3782,7 @@
+
users