vroom/templates/default/join.html.ep

% title sprintf l('ROOM_s'), $room;
%= include 'header'
  <div class="container-fluid">
    <nav id="toolbar" class="navbar navbar-default" role="toolbar">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#roomToolBar">
          <span class="sr-only">
          </span>
          <span class="icon-bar">
          </span>
          <span class="icon-bar">
          </span>
          <span class="icon-bar">
          </span>
        </button>
      </div>
      <input id="roomName" name="roomName" type="hidden" value="<%= $room %>"/>
      <div id="roomToolBar" class="collapse navbar-collapse">
        <div class="navbar-form navbar-left input-group">
          <div class="input-group">
            <input type="text" id="displayName" class="form-control help" placeholder="<%=l 'YOUR_NAME' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'NAME_SENT_TO_OTHERS' %>"/>
            <span class="input-group-btn">
              <button id="changeColorButton" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CHANGE_COLOR' %>">
                <span class="glyphicon glyphicon-tag">
                </span>
              </button>
            </span>
          </div>
        </div>
        <div class="btn-group navbar-form navbar-left">
          <% if ($etherpad eq 'true'){ %>
          <div class="btn-group">
          <% } %>
            <button id="chatDropdown" class="btn btn-default collapsed help" data-toggle="collapse" data-target="#chatMenu" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CLICK_TO_CHAT' %>">
              <span class="glyphicon glyphicon-comment">
              </span>
              <span class="badge" id="unreadMsg">
                0
              </span>
            </button>
          </div>
          <% if ($etherpad eq 'true'){ %>
          <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default help" id="etherpadLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'OPEN_ETHERPAD' %>">
              <input type = "checkbox" id="etherpadButton">
                <span class="glyphicon glyphicon-pencil">
                </span>
              </button>
            </label>
          </div>
        </div>
        <% } %>
        <div class="btn-group navbar-form navbar-left" data-toggle="buttons">
          <label class="btn btn-default help" id="muteMicLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'MUTE_MIC' %>">
            <input type="checkbox" id="muteMicButton">
            <span class="glyphicon glyphicon-volume-off">
            </span>
          </label>
          <label class="btn btn-default help" id="suspendCamLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SUSPEND_CAM' %>">
            <input type="checkbox" id="suspendCamButton">
            <span class="glyphicon glyphicon-eye-close">
            </span>
          </label>
          <label class="btn btn-default help aloneEl" id="pauseMohLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PAUSE_MOH' %>">
            <input type="checkbox" id="pauseMohButton">
            <span class="glyphicon glyphicon-music">
            </span>
          </label>
          <label class="btn btn-default help" id="shareScreenLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SHARE_YOUR_SCREEN' %>">
            <input type="checkbox" id="shareScreenButton">
            <span class="glyphicon glyphicon-expand">
            </span>
          </label>
        </div>
        <div class="btn-group navbar-form navbar-left">
          <div class="btn-group dropdown ownerEl">
            <button class="btn btn-default dropdown-toggle help" type="button" id="inviteMenuButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'INVITE_PEOPLE' %>">
              <span class="glyphicon glyphicon-user">
              </span>
              <span class="caret">
              </span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="inviteMenuButton" id="inviteMenu">
              <li class="text-center">
                <p>
                  <%=l 'TO_INVITE_SHARE_THIS_URL' %>
                </p>
                <% my $url = $self->url_for('/')->to_abs;
                   $url .= ($url =~ m/\/$/) ? '':'/';
                %>
                <h4>
                  <a href="javascript:void(0)" onclick="inviteUrlPopup();">
                    <%= $url . $room %>
                  </a>
                </h4>
              </li>
              <li class="divider">
              </li>
              <li>
                <div class="text-center">
                  <button type="button" class="btn btn-default help" id="showEmailInvite" data-toggle="tooltip" data-placement="bottom" title="<%=l 'YOU_CAN_INVITE_BY_MAIL' %>">
                    <span class="glyphicon glyphicon-envelope">
                    </span>
                  </button>
                </div>
              </li>
            </ul>
          </div>
          <div class="btn-group dropdown ownerEl threePeersEl">
            <button class="btn btn-default dropdown-toggle help" type="button" id="groupActionsButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'GROUP_ACTIONS' %>">
              <span class="glyphicon glyphicon-flag">
              </span>
              <span class="caret">
              </span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="groupActionsButton" id="confMenu">
              <li class="text-center">
                <div class="navbar-form">
                  <div class="btn-group" data-toggle="buttons">
                    <button type="button" class="btn btn-default help" id="muteEveryoneButton" data-toggle="tooltip" data-placement="bottom" title="<%=l 'MUTE_EVERYONE' %>">
                      <span class="glyphicon glyphicon-volume-off">
                      </span>
                    </button>
                    <button type="button" class="btn btn-default help" id="unmuteEveryoneButton" data-toggle="tooltip" data-placement="bottom" title="<%=l 'UNMUTE_EVERYONE' %>">
                      <span class="glyphicon glyphicon-volume-up">
                      </span>
                    </buton>
                    <button type="button" class="btn btn-default help" id="suspendEveryoneButton" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SUSPEND_EVERYONE' %>">
                      <span class="glyphicon glyphicon-eye-close">
                      </span>
                    </button>
                    <button type="button" class="btn btn-default help" id="resumeEveryoneButton" data-toggle="tooltip" data-placement="bottom" title="<%=l 'RESUME_EVERYONE' %>">
                      <span class="glyphicon glyphicon-eye-open">
                      </span>
                    </button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="btn-group dropdown ownerEl">
            <button class="btn btn-default dropdown-toggle help" type="button" id="confMenuButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CONFIGURE' %>">
              <span class="glyphicon glyphicon-wrench">
              </span>
              <span class="caret">
              </span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="confMenuButton" id="confMenu">
              <li class="text-center">
                <div class="navbar-form">
                  <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default help" id="lockLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PREVENT_TO_JOIN' %>">
                      <input type="checkbox" id="lockButton">
                      <span class="glyphicon glyphicon-ban-circle">
                      </span>
                    </label>
                    <label class="btn btn-default help" id="joinPassLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PASSWORD_PROTECT' %>">
                      <input type="checkbox" id="joinPassButton">
                      <span class="glyphicon glyphicon-lock">
                      </span>
                    </label>
                    <label class="btn btn-default help" id="persistentLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'MAKE_THIS_ROOM_PERSISTENT' %>">
                      <input type="checkbox" id="persistentButton">
                      <span class="glyphicon glyphicon-pushpin">
                      </span>
                    </label>
                    <label class="btn btn-default help" id="askForNameLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'FORCE_DISPLAY_NAME' %>">
                      <input type="checkbox" id="askForNameButton">
                      <span class="glyphicon glyphicon-leaf">
                      </span>
                    </label>
                  </div>
                </div>
              </li>
              <li class="divider">
              </li>
              <li class="text-center">
                <div class="navbar-form">
                  <div class="btn-group">
                    <%
                      my $wipeTitle = ($etherpad) ? 'WIPE_CHAT_AND_PAD' : 'WIPE_CHAT';
                    %>
                    <button id="wipeDataButton" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l $wipeTitle %>">
                      <span class="glyphicon glyphicon-fire">
                      </span>
                    </button>
                    <button id="terminateRoomButton" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'TERMINATE_ROOM' %>">
                      <span class="glyphicon glyphicon-trash">
                      </span>
                    </button>
                  </div>
                </div>
              </li>
              <li class="divider">
              </li>
              <li>
                <p class="text-center">
                  <%=l 'NOTIFICATION_ON_JOIN' %>
                </p>
                <ul class="list-inline" id="emailNotificationList">
                </ul>
                <form class="navbar-form" id="newEmailNotificationForm">
                  <div class="input-group">
                    <input type="email" id="newEmailNotification" class="form-control help" placeholder="<%=l 'EMAIL_PLACEHOLDER' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'ADD_NOTIFICATION' %>"/>
                    <span class="input-group-btn">
                      <button id="newEmailNotificationButton" type="submit" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'ADD_THIS_ADDRESS' %>">
                        <span class="glyphicon glyphicon-ok">
                        </span>
                      </button>
                    </span>
                  </div>
                </form>
              </li>
            </ul>
          </div>
        </div>
        <div class="btn-group navbar-form navbar-left">
          <button class="btn btn-default dropdown-toggle help unauthEl" type="button" id="authMenuButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'AUTHENTICATE' %>">
            <span class="glyphicon glyphicon-log-in">
            </span>
            <span class="caret">
            </span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="authMenuButton" id="authMenu">
            <li>
              <form class="navbar-form" id="authForm">
                <p class="text-center">
                  <%=l 'AUTH_TO_MANAGE_THE_ROOM' %>
                </p>
                <div class="input-group">
                  <input type="password" id="authPass" class="form-control help" placeholder="<%=l 'PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'AUTHENTICATE' %>"/>
                  <span class="input-group-btn">
                    <button id="authPassButton" type="submit" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'AUTHENTICATE' %>">
                      <span class="glyphicon glyphicon-ok">
                      </span>
                    </button>
                  </span>
                </div>
              </form>
            </li>
          </ul>
        </div>
        <div class="navbar-form navbar-right" data-toggle="buttons" >
          <div class="btn-group">
            <button id="helpButton" class="btn btn-default help" data-toggle="modal" data-target="#helpModal" rel="tooltip" data-placement="bottom" title="<%=l 'HELP' %>">
              <span class="glyphicon glyphicon-question-sign">
              </span>
            </button>
            <div id="timeCounter" class="btn btn-default disabled">
            </div>
            <button class="btn btn-default help" id="logoutButton" data-toggle="tooltip" data-placement="bottom" title="<%=l 'LOGOUT' %>">
              <span class="glyphicon glyphicon-log-out">
              </span>
            </button>
          </div>
        </div>
      </div>
    </nav>
    <div class="modal fade" role="dialog" id="helpModal" aria-labelledby="helpModal" aria-hidden="true">
     <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title">
              <%=l 'HELP' %>
            </h4>
          </div>
          <div class="modal-body">
            <div class="list-group">
              <div class="list-group-item row">
                <div class="col-md-3 text-center">
                  <input type="text" class="form-control" placeholder="<%=l 'YOUR_NAME' %>">
                </div>
                <div class="col-md-9">
                  <%=l 'HELP_SET_DISPLAY_NAME' %>
                </div>
              </div>
              <div class="list-group-item row">
                <div class="col-md-1 text-center">
                  <div class="btn btn-default">
                    <span class="glyphicon glyphicon-tag">
                    </span>
                  </div>
                </div>
                <div class="col-md-11">
                  <%=l 'HELP_CHANGE_COLOR_BUTTON' %>
                </div>
              </div>
              <div class="list-group-item row">
                <div class="col-md-1 text-center">
                  <div class="btn btn-default">
                    <span class="glyphicon glyphicon-comment">
                    </span>
                  </div>
                </div>
                <div class="col-md-11">
                  <%=l 'HELP_CHAT_BUTTON' %>
                </div>
              </div>
              <div class="list-group-item row">
                <div class="col-md-1 text-center">
                  <div class="btn btn-default">
                    <span class="glyphicon glyphicon-volume-off">
                    </span>
                  </div>
                </div>
                <div class="col-md-11">
                  <%=l 'HELP_MUTE_BUTTON' %>
                </div>
              </div>
              <div class="list-group-item row">
                <div class="col-md-1 text-center">
                  <div class="btn btn-default">
                    <span class="glyphicon glyphicon-eye-close">
                    </span>
                  </div>
                </div>
                <div class="col-md-11">
                  <%=l 'HELP_SUSPEND_CAM_BUTTON' %>
                </div>
              </div>
              <div class="list-group-item row aloneEl">
                <div class="col-md-1">
                  <div class="btn btn-default">
                    <span class="glyphicon glyphicon-music">
                    </span>
                  </div>
                </div>
                <div class="col-md-11">
                  <%=l 'HELP_MOH_BUTTON' %>
                </div>
              </div>
              <div class="list-group-item row">
                <div class="col-md-1 text-center">
                  <div class="btn btn-default">
                    <span class="glyphicon glyphicon-expand">
                    </span>
                  </div>
                </div>
                <div class="col-md-11">
                  <%=l 'HELP_SHARE_SCREEN_BUTTON' %>
                </div>
              </div>
              <div class="list-group-item row ownerEl">
                <div class="col-md-1 text-center">
                  <a data-toggle="collapse" href="#helpInviteMenuCollapse" class="btn btn-default">
                    <span class="glyphicon glyphicon-user">
                    </span>
                    <span class="caret">
                    </span>
                  </a>
                </div>
                <div class="col-md-11">
                  <%=l 'HELP_INVITE_MENU' %>
                </div>
              </div>
              <div id="helpInviteMenuCollapse" class="collapse">
                <div class="list-group-item row ownerEl">
                  <div class="col-md-1 col-md-offset-1 text-center">
                    <div class="btn btn-default">
                      <span class="glyphicon glyphicon-send">
                      </span>
                    </div>
                  </div>
                  <div class="col-md-10">
                    <%=l 'HELP_EMAIL_INVITE_BUTTON' %>
                  </div>
                </div>
              </div>
              <div class="list-group-item row ownerEl threePeersEl">
                <div class="col-md-1 text-center">
                  <a data-toggle="collapse" href="#helpGroupActionsMenuCollapse" class="btn btn-default">
                    <span class="glyphicon glyphicon-flag">
                    </span>
                    <span class="caret">
                    </span>
                  </a>
                </div>
                <div class="col-md-11">
                  <%=l 'HELP_GROUP_ACTIONS' %>
                </div>
              </div>
              <div id="helpGroupActionsMenuCollapse" class="collapse">
                <div class="list-group-item row ownerEl threePeersEl">
                  <div class="col-md-1 col-md-offset-1 text-center">
                    <div class="btn btn-default">
                      <span class="glyphicon glyphicon-volume-off">
                      </span>
                    </div>
                  </div>
                  <div class="col-md-10">
                    <%=l 'HELP_MUTE_EVERYONE_BUTTON' %>
                  </div>
                </div>
                <div class="list-group-item row ownerEl threePeersEl">
                  <div class="col-md-1 col-md-offset-1 text-center">
                    <div class="btn btn-default">
                      <span class="glyphicon glyphicon-volume-up">
                      </span>
                    </div>
                  </div>
                  <div class="col-md-10">
                    <%=l 'HELP_UNMUTE_EVERYONE_BUTTON' %>
                  </div>
                </div>
                <div class="list-group-item row ownerEl threePeersEl">
                  <div class="col-md-1 col-md-offset-1 text-center">
                    <div class="btn btn-default">
                      <span class="glyphicon glyphicon-eye-close">
                      </span>
                    </div>
                  </div>
                  <div class="col-md-10">
                    <%=l 'HELP_SUSPEND_EVERYONE_BUTTON' %>
                  </div>
                </div>
                <div class="list-group-item row ownerEl threePeersEl">
                  <div class="col-md-1 col-md-offset-1 text-center">
                    <div class="btn btn-default">
                      <span class="glyphicon glyphicon-eye-open">
                      </span>
                    </div>
                  </div>
                  <div class="col-md-10">
                    <%=l 'HELP_RESUME_EVERYONE_BUTTON' %>
                  </div>
                </div>
              </div>
              <div class="list-group-item row ownerEl">
                <div class="col-md-1 text-center">
                  <a data-toggle="collapse" href="#helpConfMenuCollapse" class="btn btn-default">
                    <span class="glyphicon glyphicon-wrench">
                    </span>
                    <span class="caret">
                    </span>
                  </a>
                </div>
                <div class="col-md-11">
                  <%=l 'HELP_CONF_MENU' %>
                </div>
              </div>
              <div id="helpConfMenuCollapse" class="collapse">
                <div class="list-group-item row ownerEl">
                  <div class="col-md-1 col-md-offset-1 text-center">
                    <div class="btn btn-default">
                      <span class="glyphicon glyphicon-ban-circle">
                      </span>
                    </div>
                  </div>
                  <div class="col-md-10">
                    <%=l 'HELP_LOCK_BUTTON' %>
                  </div>
                </div>
                <div class="list-group-item row ownerEl">
                  <div class="col-md-1 col-md-offset-1 text-center">
                    <div class="btn btn-default">
                      <span class="glyphicon glyphicon-lock">
                      </span>
                    </div>
                  </div>
                  <div class="col-md-10">
                    <%=l 'HELP_PASSWORD_BUTTON' %>
                  </div>
                </div>
                <div class="list-group-item row ownerEl">
                  <div class="col-md-1 col-md-offset-1 text-center">
                    <div class="btn btn-default">
                      <span class="glyphicon glyphicon-pushpin">
                      </span>
                    </div>
                  </div>
                  <div class="col-md-10">
                    <%=l 'HELP_PERSISTENT_BUTTON' %>
                  </div>
                </div>
                <div class="list-group-item row ownerEl">
                  <div class="col-md-1 col-md-offset-1 text-center">
                    <div class="btn btn-default">
                      <span class="glyphicon glyphicon-leaf">
                      </span>
                    </div>
                  </div>
                  <div class="col-md-10">
                    <%=l 'HELP_ASK_FOR_NAME_BUTTON' %>
                  </div>
                </div>
                <div class="list-group-item row ownerEl">
                  <div class="col-md-1 col-md-offset-1 text-center">
                    <div class="btn btn-default">
                      <span class="glyphicon glyphicon-fire">
                      </span>
                    </div>
                  </div>
                  <div class="col-md-10">
                    <%=l 'HELP_WIPE_DATA_BUTTON' %>
                  </div>
                </div>
              </div>
              <div class="list-group-item row">
                <div class="col-md-1 text-center">
                  <div class="btn btn-default">
                    <span class="glyphicon glyphicon-log-out">
                    </span>
                  </div>
                </div>
                <div class="col-md-11">
                  <%=l 'HELP_LOGOUT_BUTTON' %>
                </div>
              </div>
              <div class="list-group-item row ownerEl">
                <div class="col-md-3 text-center">
                  <div class="btn-group">
                    <div class="btn btn-sm btn-default">
                      <span class="glyphicon glyphicon-volume-off">
                      </span>
                    </div>
                    <div class="btn btn-sm btn-default">
                      <span class="glyphicon glyphicon-eye-close">
                      </span>
                    </div>
                    <div class="btn btn-sm btn-default">
                      <span class="glyphicon glyphicon-certificate">
                      </span>
                    </div>
                    <div class="btn btn-sm btn-default">
                      <span class="glyphicon glyphicon-remove-circle">
                      </span>
                    </div>
                  </div>
                </div>
                <div class="col-md-9">
                  <%=l 'HELP_PEER_ACTIONS_BUTTONS' %>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" role="dialog" id="setDisplayName" aria-labelledby="setDisplayName" aria-hidden="true" data-keyboard="false" data-backdrop="static">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="setDisplayNameTitle">
              <%=l 'DISPLAY_NAME_REQUIRED' %>
            </h4>
          </div>
          <div class="modal-body">
            <form role="form" class="well" id="displayNamePreForm">
              <label for="displayNamePre">
                <%=l 'SET_A_DISPLAY_NAME' %>
              </label>
              <div class="form-group">
                <input type="text" class="form-control" id="displayNamePre" name="displayNamePre" placeholder="<%=l 'YOUR_NAME' %>">
              </div>
              <button id="displayNamePreButton" class="btn btn-primary disabled" type="submit">
                <%=l 'SUBMIT' %>
              </button>
              <a class="btn btn-default" href="<%= $self->get_url('/') %>">
                <%=l 'CANCEL' %>
              </a>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" role="dialog" id="wipeModal" aria-labelledby="wipeModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title">
              <%=l 'WIPE_ROOM_DATA' %>
            </h4>
          </div>
          <div class="modal-body">
            <p>
              <%=l 'YOU_ARE_ABOUT_TO_WIPE_DATA' %>
              <%=l 'THIS_INCLUDE' %>
              <ul>
                <li>
                  <%=l 'CHAT_HISTORY' %>
                </li>
                <% if ($etherpad) { %>
                <li>
                  <%=l 'PAD_CONTENT' %>
                </li>
                <% } %>
              </ul>
            </p>
          </div>
          <div class="modal-footer">
            <button id="confirmWipeButton" class="btn btn-danger">
              <%=l 'CONFIRM_WIPE' %>
            </button>
            <button class="btn btn-default" data-dismiss="modal" data-target="#wipeModal">
              <%=l 'CANCEL' %>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" role="dialog" id="terminateModal" aria-labelledby="terminateModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title">
              <%=l 'TERMINATE_ROOM' %>
            </h4>
          </div>
          <div class="modal-body">
            <p>
              <%=l 'YOU_ARE_ABOUT_TO_TERMINATE_ROOM' %>
            </p>
            <ul>
              <li>
                <%=l 'ALL_PEERS_WILL_HANGUP' %>
              </li>
              <li>
                <%=l 'ALL_DATA_WILL_BE_WIPED' %>
              </li>
              <li>
                <%=l 'ROOM_WILL_BE_DELETED' %>
              </li>
            </ul>
          </div>
          <div class="modal-footer">
            <button id="confirmTerminateButton" class="btn btn-danger">
              <%=l 'CONFIRM_TERMINATE' %>
            </button>
            <button class="btn btn-default" data-dismiss="modal" data-target="#terminateModal">
              <%=l 'CANCEL' %>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" role="dialog" id="quitModal" aria-labelledby="quitModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title">
              <%=l 'LEAVE_THIS_ROOM' %>
            </h4>
          </div>
          <div class="modal-body">
            <p>
              <%=l 'ARE_YOU_SURE_YOU_WANT_TO_LEAVE' %>
            </p>
            <p class="ownerEl">
              <%=l 'YOU_CAN_WIPE_DATA_BEFORE_LEAVING' %>
            </p>
          </div>
          <div class="modal-footer">
            <button id="confirmWipeAndQuitButton" class="btn btn-danger ownerEl">
              <%=l 'WIPE_AND_QUIT' %>
            </button>
            <button id="confirmQuitButton" class="btn btn-primary">
              <%=l 'QUIT' %>
            </button>
            <button class="btn btn-default" data-dismiss="modal" data-target="#quitModal">
              <%=l 'CANCEL' %>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" role="dialog" id="chromeExtMessage" aria-labelledby="chromeExtMessage" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="chromeExtMessageTitle">
              <%=l 'EXTENSION_REQUIRED' %>
            </h4>
          </div>
          <div clas="modal-body">
            <p>
              <%=l 'VROOM_CHROME_EXTENSION' %>
            </p>
            <p>
              <a class="btn btn-default btn-lg" href="https://chrome.google.com/webstore/detail/<%= $config->{chromeExtensionId} %>" target="_blank">
                <span class="glyphicon glyphicon-download-alt">
                </span>
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" role="dialog" id="noWebrtcSupport" aria-labelledby="noWebrtcSupport" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="noWebrtcSupportTitle">
              <%=l 'BROWSER_NOT_SUPPORTED' %>
            </h4>
          </div>
          <div class="modal-body">
            <p>
              <%=l 'NO_WEBRTC_SUPPORT' %>
            </p>
            <% if ($ua !~ m/iphone|ipad|ipod/i){ %>
            <p>
              <%=l 'DOWNLOAD_ONE_OF_THESE_BROWSERS' %>
            </p>
            <div class="row">
              <%
                my $ffurl = "http://www.mozilla.org/firefox/";
                my $churl = "http://www.google.com/chrome/";
                my $opurl = "http://www.opera.com";
                if ($ua =~ m/android/i){
                  $ffurl = "https://play.google.com/store/apps/details?id=org.mozilla.firefox";
                  $churl = "https://play.google.com/store/apps/details?id=com.android.chrome";
                  $opurl = "https://play.google.com/store/apps/details?id=com.opera.browser";
                }
              %>
              <div class="col-xs-4">
                <a href="<%= $ffurl %>" target="_blank">
                  <img class="img-responsive center-block" src="<%= $self->get_url('/') %>img/firefox.png" alt="Mozilla Firefox"/>
                </a>
              </div>
              <div class="col-xs-4">
                <a href="<%= $churl %>" target="_blank">
                  <img class="img-responsive center-block" src="<%= $self->get_url('/') %>img/chrome.png" alt="Google Chrome"/>
                </a>
              </div>
              <div class="col-xs-4">
                <a href="<%= $opurl %>" target="_blank">
                  <img class="img-responsive center-block" src="<%= $self->get_url('/') %>img/opera.png" alt="Opera"/>
                </a>
              </div>
            </div>
            <% } %>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" role="dialog" id="noWebcam" aria-labelledby="noWebcam" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="noWebcamTitle">
              <%=l 'NO_WEBCAM' %>
            </h4>
          </div>
          <div class="modal-body">
            <p class="text-center">
              <%=l 'CANT_ACCESS_WEBCAM' %>
            </p>
            <img class="img-responsive center-block" src="<%= $self->get_url('/') %>img/webcam.png" alt="Webcam"/>
            <br>
            <p class="text-center">
              <%=l 'CLICK_IF_NO_WEBCAM' %>
            </p>
            <p class="text-center">
              <a class="btn btn-default btn-lg" href="<%= $self->get_url('/') . $room %>?video=false">
                <span class="glyphicon glyphicon-headphones">
                </span>
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" role="dialog" id="disconnected" aria-labelledby="disconnected" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title">
              <%=l 'CONNECTION_LOST' %>
            </h4>
          </div>
          <div class="modal-body">
            <img class="img-responsive center-block" src="<%= $self->get_url('/') %>img/flash.png" alt="<%=l 'CONNECTION_LOST' %>"/>
            <br>
            <p class="text-center">
              <%=l 'CHECK_INTERNET_ACCESS' %>
            </p>
          </div>
        </div>
      </div>
    </div>
%=include 'invite_modal'
%=include 'owner_password_modal'
%=include 'join_password_modal'
%=include 'noscript'
    <div class="frame">
      <div id="chatMenu" class="nav-collapse collapse">
        <div id="chatHistory" class="form-control">
        </div>
        <form role="form" id="chatForm">
          <div class="input-group">
            <textarea class="form-control" id="chatBox" form_id="chatForm" placeholder="<%=l 'SET_YOUR_NAME_TO_CHAT' %>" rows=1 disabled></textarea>
            <span class="input-group-btn">
              <button type="submit" id="sendChat" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_MESSAGE' %>">
                <span class="glyphicon glyphicon-share-alt">
                </span>
              </button>
              <button type="button" id="saveChat" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SAVE_HISTORY' %>">
                <span class="glyphicon glyphicon-floppy-save">
                </span>
              </button>
            </span>
          </div>
        </form>
      </div>
      <audio id="mohPlayer" src="<%= $self->get_url('/') %>snd/moh/<%= $moh %>" loop></audio>
      <div id="view" class="view row-fluid">
        <div id="webRTCVideo" class="col-xs-12 col-sm-4">
          <div class="col-xs-3 col-sm-12 col-lg-6 previewContainer" id="videoLocalContainer">
            <video id="webRTCVideoLocal" class="webRTCVideo latencyUnknown" muted oncontextmenu="return false;">
            </video>
            <div id="localVolume" class="volumeBar">
            </div>
            <div id="name_local" class="displayName">
            </div>
          </div>
        </div>
        <div id="mainView" class="col-xs-12 col-sm-8">
          <% if ($etherpad eq 'true'){ %>
          <div id="etherpadContainer"></div>
          <% } %>
          <div id="mainVideo">
          </div>
          <div id="aloneMsg" class="aloneEl">
            <h2 class="text-center">
              <%=l 'ALONE_IN_ROOM' %>
            </h2>
          </div>
        </div>
      </div>
    </div>
%= include 'js_common'
%= include 'js_room'
    <script>
      var roomName = '<%= $room %>';
      $( document ).ready(function() {
        setTimeout(function(){
          etherpad = {
            enabled: <%= $etherpad %>,
            uri: "<%= $config->{etherpadUri} %>",
            group: "<%= $etherpadGroup %>"
          };
          <% if ($video eq 'false'){ %>
          videoConstraints = false;
          <% } else{ %>
          videoConstraints = {
            mandatory: {
              maxFrameRate: 15,
            }
          };
          <% } %>
          webrtc = new SimpleWebRTC({
                   url: "<%= $config->{signalingServer} %>",
                   peerConnectionConfig: {
                     iceServers: [
                       {"url":"stun:<%= $config->{stunServer} %>"},
                       <%== ($config->{turnServer} && $config->{turnServer} ne '') ? "{\"url\":\"turn:$config->{turnServer}\", \"username\":\"$room\", \"credential\":\"$turnPassword\"}":'' %>
                     ]
                   },
                   localVideoEl: 'webRTCVideoLocal',
                   autoRequestMedia: true,
                   enableDataChannels: true,
                   debug: false,
                   detectSpeakingEvents: true,
                   adjustPeerVolume: false,
                   autoAdjustMic: false,
                   harkOptions: {
                     interval: 300,
                     threshold: -20
                   },
                   media: {
                     video: videoConstraints,
                     audio: true
                   }
                 });
          initVroom(roomName);
        }, 300);
      });
    </script>
  </div>
%= include 'footer'