You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
4.2 KiB
114 lines
4.2 KiB
extends ../../layout/main
|
|
block vendorcss
|
|
link(rel='stylesheet', href=`/highlight.js/styles/qtcreator-light.min.css?v=${pkg.version}`)
|
|
block view-content
|
|
|
|
include ../components/message
|
|
|
|
mixin renderMemberListEntry (member, options)
|
|
-
|
|
options = Object.assign({
|
|
active: false,
|
|
idle: false,
|
|
audioActive: false,
|
|
audioIndicatorActive: false,
|
|
}, options);
|
|
|
|
li(
|
|
data-user-id= member._id,
|
|
data-username= member.username,
|
|
class={ 'entry-active': options.active, 'entry-idle': options.idle, 'entry-audio-active': options.audioActive },
|
|
).member-list-entry
|
|
div(uk-grid).uk-grid-collapse.uk-flex-middle
|
|
.uk-width-auto
|
|
img(src="/img/default-member.png").member-profile-icon
|
|
.uk-width-expand= member.username
|
|
.uk-width-auto
|
|
div(data-member-id= member._id, class={ 'indicator-active': options.audioIndicatorActive }).member-audio-indicator
|
|
i.fas.fa-volume-off
|
|
|
|
mixin renderLiveMember (member)
|
|
div(data-user-id= member._id, data-username= member.username).stage-live-member
|
|
video(poster="/img/default-poster.png", disablepictureinpicture, disableremoteplayback)
|
|
.uk-flex.live-meta.no-select
|
|
.live-username.uk-width-expand
|
|
.uk-text-truncate= member.displayName || member.username
|
|
.uk-width-auto
|
|
i.fas.fa-volume-off
|
|
.uk-width-auto
|
|
.uk-margin-small-left
|
|
i.fas.fa-cog
|
|
|
|
block view-navbar
|
|
|
|
.dtp-chat-stage
|
|
#room-member-panel.chat-sidebar
|
|
.chat-stage-header
|
|
div(uk-grid).uk-grid-small.uk-grid-middle
|
|
.uk-width-expand
|
|
.uk-text-truncate Active Members
|
|
.uk-width-auto
|
|
.chat-present-count.uk-text-small ---
|
|
.sidebar-panel
|
|
ul(id="chat-active-members", data-room-id= room._id).uk-list.uk-list-collapse
|
|
|
|
.chat-stage-header Idle Members
|
|
.sidebar-panel
|
|
.uk-text-italic There are no idle members.
|
|
ul(id="chat-idle-members", data-room-id= room._id, hidden).uk-list.uk-list-collapse
|
|
|
|
.chat-container
|
|
|
|
.chat-content-panel.uk-height-1-1
|
|
|
|
.live-content.uk-height-1-1
|
|
.chat-stage-header
|
|
div(uk-grid).uk-grid-small
|
|
.uk-width-expand
|
|
.uk-text-truncate= room.name
|
|
if room.owner._id.equals(user._id)
|
|
.uk-width-auto
|
|
a(href=`/chat/room/${room._id}/settings`, uk-tooltip={ title: 'Configure room settings' }).uk-link-reset
|
|
i.fas.fa-cog
|
|
.uk-width-auto
|
|
a(href="/", uk-tooltip={ title: 'Leave room' }).uk-link-reset
|
|
i.fas.fa-person-through-window
|
|
|
|
.chat-media
|
|
div(uk-grid).uk-flex-center
|
|
div(class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@l uk-width-1-4@xl")
|
|
+renderLiveMember(user)
|
|
|
|
div(id="chat-message-list").chat-messages.uk-height-1-1
|
|
-
|
|
var testMessage = {
|
|
created: new Date(),
|
|
author: user,
|
|
content: "This is the chat content panel. It should word-wrap and scroll correctly, and will be where individual chat messages will render as they arrive and are sent.",
|
|
};
|
|
|
|
each message of messages
|
|
+renderChatMessage(message)
|
|
|
|
.chat-input-panel
|
|
form(
|
|
method="POST",
|
|
action=`/chat/room/${room._id}/message`,
|
|
id="chat-input-form",
|
|
data-room-id= room._id,
|
|
onsubmit="return window.dtp.app.sendUserChat(event);",
|
|
hidden= user && user.flags && user.flags.isCloaked,
|
|
enctype="multipart/form-data"
|
|
).uk-form
|
|
textarea(id="chat-input-text", name="content", rows=2).uk-textarea.uk-resize-none.uk-border-rounded
|
|
.uk-margin-small
|
|
.uk-flex
|
|
.uk-width-expand
|
|
.uk-width-auto
|
|
button(id="chat-send-btn", type="submit", uk-tooltip={ title: 'Send message' }).uk-button.uk-button-primary.uk-button-small.uk-border-rounded.uk-light
|
|
i.fas.fa-paper-plane
|
|
|
|
block viewjs
|
|
script.
|
|
window.dtp = window.dtp || { };
|
|
window.dtp.room = !{JSON.stringify(room)};
|