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.
141 lines
5.9 KiB
141 lines
5.9 KiB
extends ../../layout/main
|
|
block vendorcss
|
|
if user && (user.ui.theme === 'chat-light')
|
|
link(rel='stylesheet', href=`/highlight.js/styles/qtcreator-light.min.css?v=${pkg.version}`)
|
|
else
|
|
link(rel='stylesheet', href=`/highlight.js/styles/obsidian.min.css?v=${pkg.version}`)
|
|
block view-content
|
|
|
|
include ../components/message
|
|
include ../components/member-list-item
|
|
|
|
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.fa-solid.fa-volume-off
|
|
.uk-width-auto
|
|
.uk-margin-small-left
|
|
i.fa-solid.fa-cog
|
|
|
|
block view-navbar
|
|
|
|
div(
|
|
ondragenter="return dtp.app.onDragEnter(event);",
|
|
ondragleave="return dtp.app.onDragLeave(event);",
|
|
ondragover="return dtp.app.onDragOver(event);",
|
|
ondrop="return dtp.app.onDrop(event);",
|
|
).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
|
|
each presentMember of room.present
|
|
-
|
|
var isHost = room.owner._id.equals(user._id)
|
|
+renderChatMemberListItem(room, presentMember, { isHost: isHost, isGuest: !isHost })
|
|
|
|
.chat-stage-header Idle Members
|
|
.sidebar-panel
|
|
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}/invite`,
|
|
uk-tooltip={ title: 'Invite people to the room' },
|
|
onclick=`return dtp.app.showForm(event, '/chat/room/${room._id}/invite', 'chat-room-invite')`,
|
|
).uk-link-reset
|
|
i.fa-solid.fa-user-plus
|
|
.uk-width-auto
|
|
a(href=`/chat/room/${room._id}/settings`, uk-tooltip={ title: 'Configure room settings' }).uk-link-reset
|
|
i.fa-solid.fa-cog
|
|
.uk-width-auto
|
|
a(href="/", uk-tooltip={ title: 'Leave room' }).uk-link-reset
|
|
i.fa-solid.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.sendChatRoomMessage(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
|
|
.input-button-bar
|
|
.uk-flex
|
|
.uk-width-expand
|
|
div(uk-grid).uk-grid-small
|
|
.uk-width-auto
|
|
button(
|
|
type="button",
|
|
data-target="#chat-input-text",
|
|
uk-tooltip="Select emojis to add",
|
|
onclick="dtp.app.showEmojiPicker(event);",
|
|
).uk-button.uk-button-default.uk-button-small.uk-border-rounded
|
|
i.fa-regular.fa-face-smile
|
|
.uk-width-auto
|
|
.uk-form-custom
|
|
input(id="image-files", name="imageFiles", type="file", uk-tooltip="Select an image to attach")
|
|
button(type="button").uk-button.uk-button-default.uk-button-small.uk-border-rounded
|
|
span
|
|
i.fa-regular.fa-image
|
|
.uk-width-auto
|
|
.uk-form-custom
|
|
input(id="video-file", name="videoFiles", type="file", uk-tooltip="Select a video to attach")
|
|
button(type="button").uk-button.uk-button-default.uk-button-small.uk-border-rounded
|
|
span
|
|
i.fa-solid.fa-video
|
|
.uk-width-auto
|
|
button(id="chat-send-btn", type="submit", uk-tooltip={ title: 'Send message' }).uk-button.uk-button-default.uk-button-small.uk-border-rounded
|
|
i.fa-regular.fa-paper-plane
|
|
|
|
.dtp-drop-feedback
|
|
.drop-feedback-container
|
|
.uk-text-center
|
|
.feedback-icon
|
|
i.fa-solid.fa-cloud-arrow-up
|
|
.drop-feedback-prompt Drop items to attach them to your message.
|
|
|
|
include ../../components/emoji-picker
|
|
|
|
block viewjs
|
|
script.
|
|
window.dtp = window.dtp || { };
|
|
window.dtp.room = !{JSON.stringify(room)};
|