Merge pull request #95 from zach-chai/home_page_rework

Home page rework

app/assets/javascripts/landing.js

@@ -41,8 +41,8 @@
     // setup event handlers
     $('.center-panel-wrapper').on ('click', '.meeting-join', function (event) {
       var name = $('.meeting-user-name').val();
-      Meeting.getInstance().setName(name);
+      Meeting.getInstance().setUserName(name);
-      Meeting.getInstance().setId($(".page-wrapper").data('id'));
+      Meeting.getInstance().setMeetingId($(".page-wrapper").data('id'));
 
       // a user name is set, join the user into the session
       if (name !== undefined && name !== null) {
@@ -134,6 +134,14 @@
       }
     });
 
+    $('.center-panel-wrapper').on('keyup', '.meeting-name', function (event, msg) {
+      var newId = $(this).val();
+      Meeting.getInstance().setMeetingId(newId);
+      $(".page-wrapper.meetings").data('id', newId);
+      $('.meeting-url').val(Meeting.getInstance().getURL());
+      $('.join-meeting-title').html(I18n.join_title.replace(/%{id}/, newId));
+    })
+
     // enable tooltips
     var options = {
       selector: '.has-tooltip',
@@ -148,7 +156,9 @@
     $(document).tooltip(options);
 
     // focus name input or join button
-    if ($('.meeting-user-name').is(':visible')) {
+    if ($('.meeting-name').is(':visible')) {
+      $('.meeting-name').focus();
+    } else if ($('.meeting-user-name').is(':visible')) {
       $('.meeting-user-name').focus();
     } else {
       $('.meeting-join').focus();
@@ -156,21 +166,12 @@
   };
 
   var initIndex = function() {
-    $('.generate-link').click (function (e) {
-      e.preventDefault();
-      var newId = Math.trunc(Math.random() * 1000000000);
-      Meeting.getInstance().setId(newId);
-      $(".page-wrapper.meetings").data('id', newId);
-      $('.meeting-url').val(Meeting.getInstance().getURL());
-    });
-
-    $('.generate-link').click();
 
     $('ul.previously-joined').empty();
     var joinedMeetings = localStorage.getItem('joinedMeetings');
     if (joinedMeetings && joinedMeetings.length > 0) {
       joinedMeetings = joinedMeetings.split(',');
-      $('.center-panel-wrapper .panel-footer').removeClass('hidden');
+      $('.center-panel-wrapper .previously-joined-wrapper').removeClass('hidden');
 
       for (var i = joinedMeetings.length - 1; i >= 0; i--) {
         $('ul.previously-joined').append('<li><a href="/meetings/'+joinedMeetings[i]+'">'+joinedMeetings[i]+'</a></li>');

app/assets/javascripts/meeting.coffee

@@ -19,7 +19,7 @@
 _meetingInstance = null
 
 class @Meeting
-  constructor: (@id, @type, @name) ->
+  constructor: (@meetingId, @type, @userName) ->
 
   # Gets the current instance or creates a new one
   @getInstance: ->
@@ -56,28 +56,28 @@ class @Meeting
   # Returns a response object
   #    The response object contains the URL to join the meeting
   getJoinMeetingResponse: ->
-    return $.get @getURL() + "/join?name=" + @name, (data) =>
+    return $.get @getURL() + "/join?name=" + @userName, (data) =>
       if data.messageKey == 'ok' && @type == 'meetings'
         # update name used to join meeting
-        localStorage.setItem('lastJoinedName', @getName())
+        localStorage.setItem('lastJoinedName', @getUserName())
 
         # update previously joined meetings on client
         try
           joinedMeetings = localStorage.getItem('joinedMeetings') || ''
           joinedMeetings = joinedMeetings.split(',')
-          joinedMeetings = joinedMeetings.filter (item) => item != @id.toString()
+          joinedMeetings = joinedMeetings.filter (item) => item != @meetingId.toString()
           if joinedMeetings.length >= 5
             joinedMeetings.splice(0, 1)
-          joinedMeetings.push(@id)
+          joinedMeetings.push(@meetingId)
           localStorage.setItem('joinedMeetings', joinedMeetings.join(','))
         catch err
-          localStorage.setItem('joinedMeetings', @id)
+          localStorage.setItem('joinedMeetings', @meetingId)
 
-  getId: ->
+  getMeetingId: ->
-    return @id
+    return @meetingId
 
-  setId: (id) ->
+  setMeetingId: (id) ->
-    @id = id
+    @meetingId = id
     return this
 
   getType: ->
@@ -88,13 +88,13 @@ class @Meeting
     return this
 
   getURL: ->
-    return Meeting.buildMeetingURL(@id, @type)
+    return Meeting.buildMeetingURL(@meetingId, @type)
 
-  getName: ->
+  getUserName: ->
-    return @name
+    return @userName
 
-  setName: (name) ->
+  setUserName: (name) ->
-    @name = name
+    @userName = name
     return this
 
   getModJoined: ->

app/assets/javascripts/recordings.coffee

@@ -80,7 +80,7 @@ class @Recordings
           targets: -1,
           render: (data, type, row) ->
             if type == 'display'
-              roomName = Meeting.getInstance().getId()
+              roomName = Meeting.getInstance().getMeetingId()
               recordingActions = $('.hidden-elements').find('.recording-actions')
               classes = ['recording-unpublished', 'recording-unlisted', 'recording-published']
               if row.published
@@ -157,7 +157,7 @@ class @Recordings
   # refresh the recordings from the server
   refresh: ->
     table_api = this.table.api()
-    $.get "/rooms/"+Meeting.getInstance().getId()+"/recordings", (data) =>
+    $.get "/rooms/"+Meeting.getInstance().getMeetingId()+"/recordings", (data) =>
       @setOwner(data.is_owner)
       if !@owner
         table_api.column(-1).visible(false)

app/assets/stylesheets/landing.scss

@@ -67,19 +67,6 @@
 
 .meeting-url-group {
   position: relative;
-
-  .generate-link {
-    position: absolute;
-    right: 12px;
-    top: 10px;
-    z-index: 9;
-    color: #999;
-    cursor: pointer;
-
-    &:hover {
-      color: #000;
-    }
-  }
 }
 
 .recording-update-trigger {

app/assets/stylesheets/shared.scss

@@ -26,6 +26,10 @@ html, body {
   background: #ffffff;
 }
 
+.container-fluid {
+  height: 100%;
+}
+
 .background {
   height: 350px;
   width: 100%;
@@ -68,12 +72,17 @@ body[data-controller=landing][data-action=rooms].app-background {
 .center-block {
   float: none;
 }
+.center-panel-wrapper {
+  height: 100%;
+}
 .center-panel {
+  height: 100%;
   .center-panel-size {
-    max-width: 900px
+    max-width: 1200px
   }
   .center-panel-content-size {
-    max-width: 800px;
+    height: 100%;
+    max-width: 1100px;
   }
 
   .input-spacing {
@@ -157,3 +166,16 @@ a.signin-link {
     color: #444;
   }
 }
+
+.verticle-line {
+  // parent must be position relative to work
+  width: 1px;
+  background-color: lightgray;
+  height: 100%;
+  position: absolute;
+  left: 50%;
+}
+
+.invite-join-wrapper {
+  position: relative;
+}

app/views/landing/index.html.erb

@@ -15,16 +15,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 
 <% content_for :title do %>
   <div class="title">
-    <h2><%= t('create_session') %></h2>
+    <h2><%= t('home_title') %></h2>
-  </div>
-<% end %>
-
-<% content_for :footer do %>
-  <div class="panel-footer hidden">
-    <div class="list-group text-center">
-      <h4><%= t('previously_joined_meetings') %></h4>
-      <ul class="previously-joined"></ul>
-    </div>
   </div>
 <% end %>
 
@@ -34,8 +25,38 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
     <div class="center-panel-wrapper">
       <%= render layout: 'shared/center_panel' do %>
         <div class="center-block center-panel-content-size col-xs-12">
-          <%= render 'shared/meeting_url', hidden: false %>
+          <%= render 'shared/meeting_name_form' %>
-          <%= render 'shared/join_form' %>
+
+          <div class="row">
+            <div class="previously-joined-wrapper hidden">
+              <div class="list-group text-center">
+                <h4><%= t('previously_joined_meetings') %></h4>
+                <ul class="previously-joined"></ul>
+              </div>
+            </div>
+          </div>
+
+          <div class="row invite-join-wrapper">
+            <div class="col-xs-6">
+              <div class="title-wrapper text-center">
+                <div class="title-invite">
+                  <h2><%= t('invite') %></h2>
+                  <span><%= t('invite_description') %></span>
+                </div>
+              </div>
+              <%= render 'shared/meeting_url', hidden: false %>
+            </div>
+            <div class="verticle-line"></div>
+            <div class="col-xs-6">
+              <div class="title-wrapper text-center">
+                <div class="title-join">
+                  <h2 class="join-meeting-title"><%= t('join') %></h2>
+                </div>
+              </div>
+              <%= render 'shared/join_form' %>
+            </div>
+          </div>
+
         </div>
       <% end %>
     </div>

app/views/shared/_meeting_name_form.html.erb

@@ -0,0 +1,3 @@
+<div class="meeting-name-form-wrapper">
+  <input type="text" class="form-control meeting-name" placeholder="<%= t('enter_meeting_name') %>"/>
+</div>

app/views/shared/_meeting_url.html.erb

@@ -17,11 +17,6 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
   <div class="input-group">
     <div class="meeting-url-group">
       <input type="text" class="form-control meeting-url"/>
-      <% if params[:action] == 'index' %>
-        <i class="fa fa-refresh generate-link has-tooltip" aria-hidden="true"
-           title="<%= t('url_refresh_hint') %>"
-        ></i>
-      <% end %>
     </div>
 
     <span class="input-group-btn">

config/locales/en-us.yml

@@ -43,6 +43,7 @@ en-US:
   client:
     are_you_sure: Are you sure?
     delete_recording: Delete recording
+    join_title: Join "%{id}"
     meeting_ended: Meeting was ended
     meeting_started: Meeting was started
     no_recordings: No Recordings
@@ -58,15 +59,18 @@ en-US:
     user_waiting_title: A user is waiting
   copied: Copied
   copy_error: Use Ctrl-c to copy
-  create_session: Invite others to a meeting
   create_your_session: Create your own meeting
   date_recorded: Date
   duration: Duration (minutes)
   end: End
   enter_name: Enter your name
+  enter_meeting_name: Enter a meeting name
   greet_user: Welcome, %{name}
   greet_guest: Welcome to %{name} Meeting Space
   hi_all: Hi Everyone
+  home_title: Welcome to BigBlueButton
+  invite: Invite
+  invite_description: (share this link below to invite others to this meeting)
   join: Join
   join_session: Join the current meeting
   join_session_id: Join %{id}
@@ -106,7 +110,6 @@ en-US:
   unlisted: Unlisted
   unpublished: Unpublished
   url_copy_explanation: Copy this URL to invite others to the meeting
-  url_refresh_hint: Generate a new meeting URL
   video: Video
   views: Views
   wait_for_mod_msg: Looks like you're the first one here...