Merge pull request #127 from zach-chai/help

Help page

app/assets/stylesheets/main/help.scss

@@ -0,0 +1,52 @@
+// BigBlueButton open source conferencing system - http://www.bigbluebutton.org/.
+//
+// Copyright (c) 2016 BigBlueButton Inc. and by respective authors (see below).
+//
+// This program is free software; you can redistribute it and/or modify it under the
+// terms of the GNU Lesser General Public License as published by the Free Software
+// Foundation; either version 3.0 of the License, or (at your option) any later
+// version.
+//
+// BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
+// WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+// PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public License along
+// with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
+
+.help {
+
+  .title {
+    padding-bottom: 40px;
+  }
+
+  .videos-wrapper {
+    width: 1000px;
+    height: 100%;
+  }
+
+  .video-btn {
+    position: relative;
+    width: 304px;
+    height: 169px;
+  }
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .video-icon {
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    top: 40%;
+    text-align: center;
+    z-index: 100;
+    color: #fff;
+    font-size: 40px;
+  }
+
+}

app/assets/stylesheets/main/shared.scss

@@ -79,6 +79,10 @@ body[data-controller=landing].app-background {
     max-width: 1100px;
   }
 
+  .panel {
+    position: relative;
+  }
+
   .input-spacing {
     margin-top: 15px;
   }
@@ -173,3 +177,10 @@ a.signin-link {
 .invite-join-wrapper {
   position: relative;
 }
+
+.help-link {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding-right: 3px;
+}

app/controllers/help_controller.rb

@@ -0,0 +1,20 @@
+# BigBlueButton open source conferencing system - http://www.bigbluebutton.org/.
+#
+# Copyright (c) 2016 BigBlueButton Inc. and by respective authors (see below).
+#
+# This program is free software; you can redistribute it and/or modify it under the
+# terms of the GNU Lesser General Public License as published by the Free Software
+# Foundation; either version 3.0 of the License, or (at your option) any later
+# version.
+#
+# BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+# PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+#
+# You should have received a copy of the GNU Lesser General Public License along
+# with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
+
+class HelpController < ApplicationController
+  def getting_started
+  end
+end

app/views/help/getting_started.html.erb

@@ -0,0 +1,57 @@
+<%
+# BigBlueButton open source conferencing system - http://www.bigbluebutton.org/.
+# Copyright (c) 2016 BigBlueButton Inc. and by respective authors (see below).
+# This program is free software; you can redistribute it and/or modify it under the
+# terms of the GNU Lesser General Public License as published by the Free Software
+# Foundation; either version 3.0 of the License, or (at your option) any later
+# version.
+#
+# BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
+# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+# PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+# You should have received a copy of the GNU Lesser General Public License along
+# with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
+%>
+
+<div class="page-wrapper help">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="title text-center">
+        <h2><%= t('getting_started_page.title') %></h2>
+      </div>
+    </div>
+    <div class="row">
+      <div class="center-block videos-wrapper">
+        <div class="video-item col-xs-4">
+        	<a href="https://www.youtube.com/watch?v=4Y__UsUrRx0&amp;feature=youtu.be" target="_blank">
+          	<div class="video-btn center-block">
+              <img src="https://demo.bigbluebutton.org/images/bbb-setup-audio.jpg" alt="Setting Up Audio">
+              <div class="video-icon"><i class="fa fa-play-circle-o video-icon"></i></div>
+            </div>
+        	</a>
+          <h3><a href="https://www.youtube.com/watch?v=4Y__UsUrRx0&amp;feature=youtu.be" target="_blank"><%= t('getting_started_page.setting_up_audio') %></a></h3>
+        </div>
+
+        <div class="video-item col-xs-4">
+        	<a href="https://www.youtube.com/watch?v=oh0bEk3YSwI" target="_blank">
+          	<div class="video-btn center-block">
+              <img src="https://demo.bigbluebutton.org/images/bbb-viewer-overview.jpg" alt="BigBlueButton Viewer Overview Video">
+              <div class="video-icon"><i class="fa fa-play-circle-o"></i></div>
+            </div>
+        	</a>
+          <h3><a href="https://www.youtube.com/watch?v=oh0bEk3YSwI;feature=youtu.be" target="_blank"><%= t('getting_started_page.viewer_overview') %></a></h3>
+        </div>
+
+        <div class="video-item col-xs-4">
+        	<a href="https://www.youtube.com/watch?v=J9mbw00P9W0&amp;feature=youtu.be" target="_blank">
+          	<div class="video-btn center-block">
+              <img src="https://demo.bigbluebutton.org/images/bbb-presenter-overview.jpg" alt="Moderator/Presenter Overview Video">
+              <div class="video-icon"><i class="fa fa-play-circle-o"></i></div>
+            </div>
+        	</a>
+          <h3><a href="https://www.youtube.com/watch?v=J9mbw00P9W0&amp;feature=youtu.be" target="_blank"><%= t('getting_started_page.presenter_overview') %></a></h3>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/shared/_center_panel.html.erb

@@ -24,6 +24,9 @@
           <%= yield %>
         </div>
         <%= yield :footer %>
+        <div class="help-link">
+          <%= link_to t('help'), help_url %>
+        </div>
       </div>
     </div>
   </div>

config/locales/en-us.yml

@@ -71,6 +71,12 @@ en-US:
   enter_name: Enter your name
   enter_meeting_name: Enter a meeting name to start
   footer_html: Powered by %{bbb_link}
+  getting_started_page:
+    title: Getting Started Quickly
+    setting_up_audio: Setting Up Audio
+    viewer_overview: Viewer Overview
+    presenter_overview: Moderator/Presenter Overview
+  help: Help
   hi_all: Hi Everyone
   home_title: Welcome to BigBlueButton
   invite: Invite

config/routes.rb

@@ -16,6 +16,8 @@
 
 # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
 Rails.application.routes.draw do
+  get 'help/getting_started', as: :help
+
   mount ActionCable.server => '/cable'
 
   resources :users, only: [:edit, :update]

test/controllers/help_controller_test.rb

@@ -0,0 +1,9 @@
+require 'test_helper'
+
+class HelpControllerTest < ActionDispatch::IntegrationTest
+  test "should get getting_started" do
+    get help_url
+    assert_response :success
+  end
+
+end