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.
100 lines
3.6 KiB
100 lines
3.6 KiB
extends ../../layout/main
|
|
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(src="/static/video/gdl-crush.mp4", autoplay, muted, loop, 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
|
|
|
|
.dtp-chat-stage
|
|
.chat-sidebar
|
|
.chat-stage-header Active Members
|
|
.sidebar-panel
|
|
ul(id="chat-active-members").uk-list.uk-list-collapse
|
|
+renderMemberListEntry(user)
|
|
+renderMemberListEntry(user)
|
|
+renderMemberListEntry(user)
|
|
+renderMemberListEntry(user)
|
|
+renderMemberListEntry(user)
|
|
+renderMemberListEntry(user)
|
|
+renderMemberListEntry(user)
|
|
+renderMemberListEntry(user)
|
|
+renderMemberListEntry(user)
|
|
+renderMemberListEntry(user)
|
|
+renderMemberListEntry(user)
|
|
+renderMemberListEntry(user)
|
|
|
|
.chat-stage-header Idle Members
|
|
.sidebar-panel
|
|
ul(id="chat-idle-members").uk-list.uk-list-collapse
|
|
+renderMemberListEntry(user, { idle: true })
|
|
+renderMemberListEntry(user, { idle: true })
|
|
+renderMemberListEntry(user, { idle: true })
|
|
+renderMemberListEntry(user, { idle: true })
|
|
|
|
.chat-container
|
|
.chat-stage-header
|
|
div(uk-grid)
|
|
.uk-width-expand= room.name
|
|
|
|
.chat-content-panel
|
|
div(uk-grid).uk-grid-collapse.live-content
|
|
.uk-width-expand
|
|
.chat-media
|
|
div(uk-grid)
|
|
div(class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@l uk-width-1-4@xl")
|
|
+renderLiveMember(user)
|
|
|
|
.uk-width-auto
|
|
.chat-messages
|
|
-
|
|
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.",
|
|
};
|
|
|
|
+renderChatMessage(testMessage)
|
|
+renderChatMessage(testMessage)
|
|
+renderChatMessage(testMessage)
|
|
+renderChatMessage(testMessage)
|
|
|
|
.chat-input-panel
|
|
textarea(id="chat-input", name="chatInput", rows=2).uk-textarea.uk-resize-none.uk-border-rounded
|
|
.uk-margin-small
|
|
.uk-flex
|
|
.uk-width-expand
|
|
.uk-width-auto
|
|
button(type="submit", uk-tooltip={ title: 'Send message' }).uk-button.uk-button-default.uk-button-small.uk-border-rounded
|
|
i.fas.fa-paper-plane
|