Can create a chat room and nav to it

- FLEX laytout needs a lot of work. The content pane won't clamp to a
max height, grows, and pushes the input pane off the bottom of the view.

app/controllers/home.js

@@ -35,6 +35,10 @@ export default class HomeController extends SiteController {
   async getHome (req, res, next) {
     const { chat: chatService } = this.dtp.services;
     try {
+      if (!req.user) {
+        return res.redirect('/welcome');
+      }
+
       res.locals.currentView = 'home';
       res.locals.pageDescription = 'DTP Chat Home';
 
@@ -48,8 +52,5 @@ export default class HomeController extends SiteController {
     } catch (error) {
       return next(error);
     }
-    if (!req.user) {
-      return res.redirect('/welcome');
-    }
   }
 }

app/views/chat/components/message.pug

@@ -0,0 +1,16 @@
+mixin renderChatMessage (message)
+  .chat-message
+    .uk-flex
+      .uk-width-auto.no-select
+        img(src="/img/default-member.png").member-profile-icon
+      .uk-width-expand
+        .message-attribution.uk-margin-small.no-select
+          .uk-flex.uk-flex-top
+            .uk-width-expand
+              if (message.author.displayName && (message.author.displayName.length > 0))
+                .author-display-name= message.author.displayName
+              .author-username @#{message.author.username}
+            .uk-width-auto
+              .message-timestamp= dayjs(message.created).format('h:mm a')
+        .message-content
+          div!= marked.parse(message.content)

app/views/chat/room/view.pug

@@ -1,35 +1,94 @@
 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 This is a sidebar content panel. It should word-wrap correctly and will be used to display usernames in the room with status.
+      .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 This is a sidebar content panel. It should word-wrap correctly and will be used to display usernames in the room with status.
+      .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)
-            .uk-width-1-4
+                div(class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@l uk-width-1-4@xl")
-              .live-member
+                  +renderLiveMember(user)
-                video(src="/static/video/gdl-crush.mp4", autoplay, muted, loop, disablepictureinpicture, disableremoteplayback)
+
-                .uk-flex.live-meta
-                  .live-username.uk-width-expand Rob Colbert
-                  .uk-width-auto
-                    i.fas.fa-volume-off
           .uk-width-auto
-                    .uk-margin-small-left
+            .chat-messages
-                      i.fas.fa-cog
+              -
+                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.",
+                };
 
-        .chat-messages 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

client/css/site/stage.less

@@ -7,6 +7,11 @@
 
   display: flex;
 
+  .flex-row-break {
+    flex-basis: 100%;
+    height: 0;
+  }
+
   .chat-stage-header {
     flex-grow: 0;
     flex-shrink: 0;
@@ -39,45 +44,54 @@
 
   .chat-container {
     box-sizing: border-box;
+
     display: flex;
-    flex-grow: 1;
     flex-direction: column;
+    align-items: stretch;
 
-    background-color: #e8e8e8;
+    background-color: #a8a8a8;
     color: #1a1a1a;
 
     .chat-content-panel {
       box-sizing: border-box;
-      flex-grow: 1;
+      position: relative;
+
       display: flex;
+      flex-wrap: wrap;
+
+      height: 100%;
+
+      .live-content {
+        flex-grow: 1;
 
         .chat-media {
           box-sizing: border-box;
+          flex-basis: 0;
           flex-grow: 1;
-        flex-shrink: 1;
   
           height: 100%;
           padding: @stage-panel-padding;
   
           background-color: #4a4a4a;
   
-        .live-member {
+          .stage-live-member {
             padding: 4px 4px 0 4px;
   
-          border: solid 1px #e8e8e8;
+            border: solid 1px #8a8a8a;
             border-radius: 4px;
   
             background-color: #1a1a1a;
   
             video {
               display: block;
+              border-radius: 3px;
             }
   
             .live-meta {
               color: #e8e8e8;
   
               .live-username {
-              color: #00ff00;
+                color: inherit;
               }
             }
           }
@@ -85,6 +99,7 @@
   
         .chat-messages {
           box-sizing: border-box;
+  
           flex-grow: 0;
           flex-shrink: 0;
   
@@ -93,13 +108,100 @@
           padding: @stage-panel-padding;
   
           overflow-y: scroll;
+  
+          .chat-message {
+            line-height: 1;
+  
+            margin-bottom: 10px;
+            border-bottom: solid 1px #4a4a4a;
+  
+            &:last-child {
+              border-bottom: none;
+            }
+  
+            img.member-profile-icon {
+              width: 32px;
+              height: auto;
+              border-radius: 5px;
+              margin-right: 5px;
+            }
+  
+            .message-attribution {
+  
+              .author-display-name {
+                font-size: 1.05em;
+                font-weight: bold;;
+              }
+  
+              .author-username {
+                font-size: 0.8em;
+              }
+              
+              .message-timestamp {
+                font-size: 0.9em;
+              }
+            }
+  
+            .message-content {
+  
+              p {
+                line-height: 1.1em;
+                margin-bottom: 10px;
+                color: #2a2a2a;
+              }
+            }
+          }
         }
       }
 
       .chat-input-panel {
+        flex-basis: 100%;
+        flex-grow: 0;
+        flex-shrink: 0;
+  
         padding: @stage-panel-padding;
         background-color: #1a1a1a;
         color: #e8e8e8;
       }
     }
   }
+
+  .member-list-entry {
+    background-color: transparent;
+    transition: background-color 0.25s;
+    padding: 5px 2px 2px 0;
+    line-height: 1em;
+
+    & .member-audio-indicator {
+      display: none;
+    }
+
+    &.entry-idle {
+      color: #8a8a8a;
+    }
+
+    &.entry-active {
+      background-color: rgba(0, 160, 0, 0.2);
+    }
+
+    &.entry-audio-active {
+      & .member-audio-indicator {
+        display: block;
+      }
+    }
+
+    .member-profile-icon {
+      height: 1em;
+      margin-right: 5px;
+    }
+  }
+
+  .member-audio-indicator {
+    color: #8a8a8a;
+    transition: color 0.25s;
+
+    &.indicator-active {
+      color: #00ff00;
+    }
+  }
+}